How Vue uploads files using the formData format type
This article mainly explains "Vue how to use formData format type to upload files", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "Vue how to upload files using formData format type" bar!
1. For example, if the image is uploaded, the backend needs to send formData type data to the backend.
Click upload
We use the native input approach to implement.
UploadFile2 () {/ / this event will be triggered when the button button is clicked / / the function is to open the file upload pop-up box this.$refs.uploadFile2.click ()}, fileValueChange2 () {/ / when the file is selected, the change event of input will be triggered You will enter this function var formData = new FormData () / / this.$refs.uploadFile2 is the method to get the dom element in vue / / you can get all uploaded files through files. If there are multiple file loops, you can formData.append ('file',this.$refs.uploadFile2.files [0]) / / you must set the request type formData.append (' type', "head") / / if you need to pass id, refer to the following code formData.append ('id', this.id); / / after the configuration is complete, you only need to pass the formData variable to the background to insertNavigationUpload (formData). Then (res= > {console.log (' is it simple? Brother')})}
I almost forgot one step. I won't say much about axios's request for a second encapsulation. I'll only show the interface here.
Export const tMessageNotification = data = > {return request ({url:'/tMessageNotification/upload', method: 'POST', data, headers: {' Content-Type': 'application/json'},})} Thank you for your reading. This is how Vue uploads files using formData format types. After studying this article, I believe that you have a deeper understanding of how Vue uses the formData format type to upload files, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
