element中el-upload上传文件的使用

45 阅读1分钟

前言:使用e-upload的属性与方法

思路:在e-upload中发送请求,后端返回https的链接,然后将此字符串塞到form收集的object中,统一返回给后端

<el-upload 
   :action="url"  //发送请求时的地址
   accept=".PDF,.JPG,.JPEG,.PNG,.DOC,.DOCX" //限制上传时的文件格式
  :on-success="upresume"  //上传成功时的钩子
  :limit="1" //限制文件上传个数
  :before-upload="beforeFileUpload" //上传之前的钩子
  >
                        Upload resume
                    </el-upload>
                    
 变量:
url: `${process.env.VUE_APP_BASE_API}officialWebsite/awss3/upload`

 upresume(response) { //成功时的钩子,发送请求后端返回https的路径,返回的如果能下载则证明成功了
                if (response.code === 0) {
                    this.resumeUrl = response.data  
                }
 },
 
  beforeFileUpload(file) { //上传前的钩子
                const isLt5M = file.size / 1024 / 1024 < 5; //文件不超过5MB
                if (!isLt5M) {
                    this.$message.error('上传文件大小不能超过 5MB!');
                } else {
                    this.$message.success('上传成功!');
                }
                return isLt5M
            },