vue + Element上传多个文件，支持删除重新上传，上传后将后台返回的URL发送给后台存到数据库

最新推荐文章于 2024-08-14 15:51:24 发布

weixin_45877686

最新推荐文章于 2024-08-14 15:51:24 发布

阅读量843

点赞数

文章标签： vue elementui upload

本文链接：https://blog.csdn.net/weixin_45877686/article/details/114591007

版权

vue + Element上传多个文件，支持删除重新上传，上传后将后台返回的URL发送给后台存到数据库

        <el-col :span="24">
          <el-form-item label="上传附件:" prop="attachmentUrls">
            <el-upload
                    multiple :limit="3"
                    class="upload-demo"
                    :action="doUrl"
                    :on-exceed="handleExceed"
                    :before-upload="beforeUploadPicture"
                    :on-success="uploadSuccess"
                    :on-remove="handleRemove"
                    :file-list="fileList" :show-file-list="true">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-col>

  data () {
    return {
      visible: false,
      doUrl: '',
      fileList: [],
      dataForm: {
        id: '',
        version: '',
        closeNum: 1,
        settleIds: '',
        dealResult: 1,
        sendObj: '区农经站主管部门',
        promptRemark: '',
        attachmentUrls: ''
      }
    }
  },

methods: {

    init () {
      this.doUrl = `${window.SITE_CONFIG['apiURL']}/sys/oss/upload?token=${localStorage.getItem('token')}`
      this.visible = true
    },
    handleExceed (files, fileList) {
      return this.$message.warning('当前限制最多可以上传3个文件')
    },
    //文件删除的钩子函数(该钩子默认执行 :on-remove="handleRemove"和该钩子不写也行)
    handleRemove (file,fileList) {
    	this.fileChange(fileList);
    },
    //文件上传成功后的钩子函数
    uploadSuccess (res, file, fileList) {
      this.fileChange(fileList);
    },
    fileChange(file,fileList) {
      let tempStr = '';
      if (fileList.length > 0) {
        for (let i = 0; i < fileList.length; i++) {
          if (fileList[i].response) {
            if (fileList[i].response.code === 0) {
              if (i === 0) {
                tempStr += fileList[i].response.data.src;
              } else {
                tempStr += ',' + fileList[i].response.data.src;
              }
            }
          } else if (fileList[i].status && fileList[i].status === 'success') {
            if (i === 0) {
              tempStr += fileList[i].url;
            } else {
              tempStr += ',' + fileList[i].url;
            }
          }
        }
      }
      this.dataForm.attachmentUrls = tempStr;
    },
    // 上传图片前调用方法
    beforeUploadPicture (file) {
      const is10M = file.size / 1024 / 1024 < 10
      if (!is10M) {
        this.$message.error('文件大小不能超过10MB!')
        return false
      }
      return true
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.$refs.dataForm.validate((valid) => {
        if (!valid) {
          return false
        }
        if (!this.dataForm.id) {
          return false
        }
        this.$http.post('townEarlyWarningEvent/townEarlyWarningEvent/byHandle', this.dataForm).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              this.visible = false
              this.$emit('refreshDataList')
            }
          })
        }).catch(() => {})
      })
    }, 1000, { leading: true, trailing: false })
  }