element-ui:一次多选文件上传

文章详细描述了如何在Vue.js应用中使用el-upload组件进行多文件上传,通过设置multiple属性和on-change事件来处理单文件的多次上传。同时,利用axios创建一个新的实例来发送multipart/form-data格式的请求,将文件数据提交到服务器。
摘要由CSDN通过智能技术生成

1、组件el-upload加上multiple,auto-upload,on-change

    <el-upload ... :multiple="multiple" :auto-upload="!multiple" :on-change="handleChange"  :on-success="onSuccess">

2、通过on-change进行多次单文件上传

<script>
import axios from 'axios'
import api from 'shared/api'
export default {
	props: {
		multiple: {
		    type: Boolean,
		    default: true
	    }
	},
	data () {
		return {
	      tempAxios: '',
	      imgData: Params({}, api.upload.upload),
	      token: { Authorization: localStorage.getItem('token') },
	    }
	},
	
	created () {
	   this.createNewAxios()
	 },
	methods: {
	    // 创建新的axios
	    createNewAxios () {
	      this.tempAxios = axios.create({
	        baseURL: '',
	        timeout: 5000,
	        headers: {
	          'Content-Type': 'multipart/form-data',
	          ...this.token
	        }
	      })
	    },
	    handleChange (file, fileList) {
	      if (!this.multiple) return
	      this.submitUpload(file, fileList)
	    },
	    // 上传到服务器
	    submitUpload(file, fileList) {
	      const formData = new FormData() // new formData对象
	      for (let key in this.imgData) {
	        formData.append(key, this.imgData[key])
	      }
	      formData.append('fileName', file.raw)
	      this.tempAxios.post(this.imgUrl, formData).then(res => {
	        this.onSuccess(res.data, file, fileList)
	      })
	    },
	    ...	//	原有function保持不变
	 }
 }
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值