Various implementation methods of Vue uploading picture files

Time:2021-10-19

At first, baidu added headers to all kinds of websites. Finally, it was found that it was useless. If you know something, you can tell it. Write an essay

Original input tag form upload

<input type="file" @change="onchangemd">

methods: {
 	onchangemd(e){
		Console.log (e.target. Files) // this is the information of the selected file
		let formdata = new FormData()
		Array.from(e.target.files).map(item => {
         console.log(item)
         Formdata. Append ("file", item) // add each file image to formdata
       })
       Axios.post ("interface address", formdata). Then (RES = > {console. Log (RES)})
	}
 }

When you see the binary submission data, it is successful


This is also successful (binary expansion data, because some browsers do not display binary)

As can be seen from the above figureThe traditional upload file is submitted in binary format formdata format

Upload with El upload of elementui

<el-upload action="" :on-change="handleelchange"  :auto-upload="false" list-type="picture-card">
     <i></i>
</el-upload>

 handleelchange(file, fileList) {
      console.log(file, fileList)
      let formdata = new FormData()
      Filelist. Map (item = > {// filelist is an array, so it doesn't need to be converted to a true array
        Formdata. Append ("file", item. Raw) // add each file image to formdata
      })
       Axios.post ("interface address", formdata). Then (RES = > {console. Log (RES)})
    },

There is no need to set the request header (just submit it directly in formdata format). When you see that the formdata data is binary, it indicates that the submission is normal. Similarly, some browsers do not display binary. The submission starting with —– WebKit formboundaryxozpi2juymcnow0l is also normal

Note that raw in the filelist array is the real file data. If you directly use item instead of item.raw, a 500 error will be reported, and the data in formdata is not binary but object format

fileList.map(item => {
Formdata. Append ("file", item) // error instance. To use item.raw
})

 elementui

Elementui realizes uploading multiple pictures at one time

Note: it works. Click submit to trigger the form submission event, and then initiate a request in the form submission event.

Results: each image upload requires a request, that is, multiple requests will be initiated

Processing: in the submit stage (i.e. this. $refs. XXX. Submit(), the request is initiated), and only the image is obtained in the submit function

Last note for uploading multiple pictures: the file of multiple pictures cannot be written dead. Formdata. Append (“file”, item) is written as the specified name of each picture, otherwise it will be overwritten.

<el-upload ref="elupload" action="" multiple :auto-upload="false" :http-request="handleupload"  list-type="picture-card">
	<i></i>
</el-upload>
< button @ Click = "uploadupload" > click Submit < / button >

methods:{
	uploadelupload() {
      let formdata = new FormData()
      this.$refs.elupload.submit(); //  Here is the function to execute file upload, which actually means to obtain the file we want to upload  
      this.fileList.forEach(item => {
        Formdata. Append ("file", item) // add each file image to formdata
      })
      formdata.append("score", 4)
      Axios.post ("interface address", formdata). Then (RES = > {console. Log (RES)})
    },
    handleupload(param) {
      this.fileList.push(param.file);//  Generally, the formdata object is created here, but we need to upload multiple files. In order to avoid sending multiple requests, we only get the files here, and param can get all the information uploaded by the files
    },
}

Elementui submit pictures and other data

  • The back end lets you transfer pictures, and other data.
  • Pay attention to image files: you must use formdata to transfer them
  • Other data, etc.: transfer in ordinary way
The code is basically the same as the above. Here, only the Axios request format is written
let formdata = new FormData()
Formdata. Append ("file", item) // add each file image
axios({
	method: "post",
 	URL: "interface address",
	data: formdata,
 	params: { score: 4, content: "xxxxx", order_detail_id: 24, token: "xxxx" }
}).then(res => { console.log(res) })

summary

This is the end of this article about Vue uploading image files. For more information about Vue uploading image files, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!