vue上传图片文件的多种实现方法

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

methods: {
 	onchangemd(e){
		console.log(e.target.files)//这个就是选中文件信息
		let formdata = new FormData()
		Array.from(e.target.files).map(item => {
         console.log(item)
         formdata.append("file", item)  //将每一个文件图片都加进formdata
       })
       axios.post("接口地址", formdata).then(res => { console.log(res) })
	}
 }

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

 handleelchange(file, fileList) {
      console.log(file, fileList)
      let formdata = new FormData()
      fileList.map(item => { //fileList本来就是数组，就不用转为真数组了
        formdata.append("file", item.raw)  //将每一个文件图片都加进formdata
      })
       axios.post("接口地址", formdata).then(res => { console.log(res) })
    },

fileList.map(item => {
formdata.append(“file”, item) //错误实例。要用item.raw
})

<el-upload ref="elupload" action="" multiple :auto-upload="false" :http-request="handleupload"  list-type="picture-card">
	<i class="el-icon-plus"></i>
</el-upload>
<button @click="uploadelupload">点击提交</button>

methods:{
	uploadelupload() {
      let formdata = new FormData()
      this.$refs.elupload.submit(); // 这里是执行文件上传的函数，其实也就是获取我们要上传的文件  
      this.fileList.forEach(item => {
        formdata.append("file", item)  //将每一个文件图片都加进formdata
      })
      formdata.append("score", 4)
      axios.post("接口地址", formdata).then(res => { console.log(res) })
    },
    handleupload(param) {
      this.fileList.push(param.file);// 一般情况下是在这里创建FormData对象，但我们需要上传多个文件，为避免发送多次请求，在这里只进行文件的获取，param可以拿到文件上传的所有信息
    },
}

代码与上述大体相同、这里就只写axios请求格式
let formdata = new FormData()
formdata.append("file", item)  //将每一个文件图片都
axios({
	method: "post",
 	url: "接口地址",
	data: formdata,
 	params: { score: 4, content: "xxxxx", order_detail_id: 24, token: "xxxx" }
}).then(res => { console.log(res) })