图片上传多张_yyy382683xbcatbsy-优快云博客

本文链接：https://blog.youkuaiyun.com/YYY1920/article/details/103401542

本文深入探讨了使用Element UI中文件上传组件的详细配置与使用方法，包括如何设置上传URL、处理文件移除、预览、上传前的文件类型检查及大小限制等关键功能。通过具体代码示例，读者可以了解到如何在实际项目中灵活应用该组件，实现多样化的文件上传需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  <el-upload
                class="upload-demo"
                ref="upload"
                :action="uploadUrl()"
                :multiple='true'
                :on-remove="handleRemove"
                :on-preview="handlePictureCardPreview"
                accept=".jpg,.png,.gif,.txt,.doc,.docx,.xls,.xlsx,.zip,.pdf,.ppt"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
             <a class='download' style="color: red;">上传文件只能是 jpg、png、gif、txt、doc、docx、xls、xlsx、zip、pdf、ppt格式!</a>
                <a class='download' id="linkUrl" href="" download=""  title="下载" style="color: red;">下载</a>
              </el-upload>

后者用这种方式替换 action=“http://192.168.0.121:8004/admin/Upload/index”

  uploadUrl(){
        console.log(this.baseUrl)
        return this.baseUrl+"/admin/Upload/index"
      },

 handleRemove(file, fileList) {//移除
        fileList.forEach((item)=>{
             this.arr=item.response.data

        })
        console.log(this.arr)
        // this.arr=fileList
      },

 handleAvatarSuccess(res, file) {//图片上传成功
        console.log(res, file)
        this.arr.push(res.data)
        console.log(this.arr)
        // arr.push(res.data);
        // console.log(arr)
        // this.form.pictures.push(files)
        // this.dialogImageUrl = this.IMAGE_URL + '/image/' + res.data.file;
      },

 //重新上传
      clearFiles () {
        this.$refs['upload'].clearFiles();
      },

  handlePictureCardPreview(file) {//预览
        console.log(this.baseUrl+file.response.data)
        this.dialogImageUrl = this.baseUrl+'\\'+file.response.data;
        let link2=document.getElementById('linkUrl')
        link2.href=this.baseUrl+'\\'+file.response.data;
        link2.click()
      },
      beforeAvatarUpload(file) {//文件上传之前调用做一些拦截限制
        console.log(file)
        var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
        console.log(testmsg)
        const extension = testmsg === 'xls'
        const extension2 = testmsg === 'xlsx'
        const extension3 = testmsg === 'jpg'
        const extension4 = testmsg === 'png'
        const extension5 = testmsg === 'gif'
        const extension6 = testmsg === 'txt'
        const extension7 = testmsg === 'doc'
        const extension8 = testmsg === 'docx'
        const extension9 = testmsg === 'zip'
        const extension10 = testmsg === 'pdf'
        const extension11 = testmsg === 'ppt'
        // const isLt2M = file.size / 1024 / 1024 < 10
        if(!extension && !extension2 && !extension3 && !extension4 && !extension5&& !extension6 & !extension7 && !extension8 && !extension9 && !extension10 && !extension11) {
          this.$message({
            message: '上传文件只能是 jpg、png、gif、txt、doc、docx、xls、xlsx、zip、pdf、ppt格式!',
            type: 'warning'
          });
          this.clearFiles()
        }
       // return !extension && !extension2 && !extension3 && !extension4 && !extension5&& !extension6 & !extension7 && !extension8 && !extension9 && !extension10 && !extension11;

        // console.log(file);
        // const isJPG = true;
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        // return isJPG && isLt2M;
      },

handleAvatarSuccess(res, file) {//图片上传成功
        console.log(res, file)
        this.arr.push(res.data)
        console.log(this.arr)
        // arr.push(res.data);
        // console.log(arr)
        // this.form.pictures.push(files)
        // this.dialogImageUrl = this.IMAGE_URL + '/image/' + res.data.file;
      },