【vue2-el-upload上传文件】

最新推荐文章于 2025-04-29 13:21:39 发布

聚宝盆_

最新推荐文章于 2025-04-29 13:21:39 发布

阅读量314

点赞数 3

分类专栏：记录项目中遇到的问题文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/weixin_47416539/article/details/145881472

版权

记录项目中遇到的问题专栏收录该内容

62 篇文章

订阅专栏

只上传一个并且再次上传替换上一个

<el-upload class="upload-demo" action="#" :on-change="handleChange"
                                :before-upload="beforeUpload" :show-file-list="false" :file-list="fileList"
                                :auto-upload="false" accept=".pdf,.docx,.doc">
                                <el-button size="small" type="primary">上传文件</el-button>
                            </el-upload>
                            <el-button size="small" type="primary" @click="submit">上传</el-button>

handleChange(file, fileList) {
this.file = file.raw
     console.log(file.raw)//上传的文件是file.raw
 },
 beforeUpload(file) {
                const isPdfOrWord = ['.pdf', '.docx', '.doc'].some(ext => file.name.endsWith(ext));
                if (!isPdfOrWord) {
                    this.$message.error('只能上传 PDF/Word 文件');
                    return false;
                }
                const isLt5M = file.size / 1024 / 1024 < 5;
                if (!isLt5M) {
                    this.$message.error('文件大小不能超过 5MB');
                    return false;
                }
                return true;
            },
            getdeliveryForm(object, type) {
                let that = this, params = {
                    file: this.file,
                }
                var service = axios.create({
				  baseURL: '统一请求接口前缀',
				  withCredentials: true, // 跨域支持发送cookie
				  timeout: 5000 // 请求超时时间
				})
                function postFormData(url, params) {
				  return new Promise(function (resolve, reject) {
				    service({
				      headers: {
				      //需要注意 上传文件的请求头一定是下面这个！！！！
				        'Content-Type': 'multipart/form-data', 
				        //以下都是必须要有的参
				        'user-token': userToken,
				      },
				      transformRequest: [
				        function (data) {
				          // 在请求之前对data传参进行格式转换
				          var formData = new FormData()
				          Object.keys(data).forEach(function (key) {
				            formData.append(key, data[key])
				          })
				          return formData
				        }
				      ],
				      url: url,
				      method: 'post',
				      data: params
				    })
				      .then(function (res) {
				        if (res.data.code != 200) {
				          handlerHttpError(res.data)
				          reject(res.data)
				        } else {
				          resolve(res.data)
				        }
				      })
				      .catch(function (err) {
				        if (err.message.includes('timeout')) {
				          window.ELEMENT.Message.error('服务器繁忙，请刷新页面重试！')
				        }
				        reject(err)
				      })
				  })
				}
                postFormData('url', params)
                    .then(function (res) {
                       
                    })
            },