swiftUI 附件上传 上传附件功能

<el-form-item label="上传附件：" prop="businessContract">
        <el-upload
          ref="upload"
          action=""
          :http-request="upload"
          :on-preview="handlePreview"
          accept=".xls,.xlsx,.doc,.docx,.pdf"
          :on-remove="handleUploadRemove"
          :file-list="fileList"
          :limit="1"
          :multiple="false"
          :on-exceed="onExceed"
          :on-error="uploadFalse"
          :on-success="uploadSuccess"
          :before-upload="beforeUploadExcel">
          <el-button size="small" type="primary">点击上传</el-button>
          <div class="el-upload__tip" slot="tip">支持文件格式为：.xls,.xlsx,.doc,.docx,.pdf,大小不超过100M</div>
        </el-upload>
      </el-form-item>

 校验：

 

let checkBusinessContract = (rule, value, callback) => {
        let _this = this;
        let isNull = validatenull;
        if (isNull(_this.ruleForm.businessContract)) {
          return callback(new Error('上传附件不能为空'));
        }
        return callback();
      };




businessContract: [{required: true, validator: checkBusinessContract, trigger: 'blur'}],

 回显：

if (!isNull(_this.formData.businessContract)) {
          let fileName = _this.formData.businessContract.lastIndexOf("."); //取到文件名开始到最后一个点的长度
          let fileNameLength = _this.formData.businessContract.length; //取到文件名长度
          let fileFormat = _this.formData.businessContract.substring(fileName + 1, fileNameLength);
          let maps = {}
          maps['name'] = '商户合同' + fileFormat + ''
          maps['url'] = _this.formData.businessContract
          _this.fileList.push(maps)
          _this.contractUrl = _this.formData.businessContract
          _this.ruleForm.businessContract = interceptUrl(_this.formData.businessContract)
        } else {
          _this.fileList = []
          _this.contractUrl = undefined
          _this.ruleForm.businessContract = []
        }

 自定义上传事件：

/**
       *自定义上传事件
       */
      upload (files) {
        let fileName = files.file.name.lastIndexOf("."); //取到文件名开始到最后一个点的长度
        let fileNameLength = files.file.name.length; //取到文件名长度
        let fileFormat = files.file.name.substring(fileName + 1, fileNameLength);
        const fileObj = files.file;
        const ruleForm = new FormData();
        // 文件对象
        ruleForm.append('file', fileObj);
        ruleForm.append('path', 'business/contract/');
        ruleForm.append('fileSuffix', fileFormat);
        // FormData 对象
        loadingInstance1 = Loading.service({fullscreen: true, text: '正在保存，请稍等~', background: 'rgba(0, 0, 0, 0.7)'});
        getSingle(ruleForm).then(response => {
          loadingInstance1.close();
          if (response.data.code != 0) {
            this.showToal('提示', response.data.msg, 'error')
          } else {
            let  name ='商户合同.'+fileFormat
            this.fileList = [
              { name: name, url: response.data.data.url }
            ]
            this.showToal('提示', '上传成功', 'success')
            this.contractUrl=response.data.data.url
          }
        }).catch(() => {
          loadingInstance1.close();
          this.showToal('提示', '上传失败，请稍后重试', 'error');
        });
      },

 

/**
       * 上传完成时触发
       * @param file
       * @returns {boolean}
       */
      handlePreview () {
        this.isOpenVideoOpen = true;
        this.realizeData = this.contractUrl;
        // if(file.status=="ready"){
        //   window.open('http://view.officeapps.live.com/op/view.aspx?src='+this.contractUrl+'')
        // }
      },

 

 

/**
       * 上传文件个数超过限制的时候执行的
       */
      onExceed () {
        this.showToal('提示', '最多只能上传一个文件哟~', 'warning');
      },

/**
       * 文件上传失败时的回调
       * @param response
       * @param file
       * @param fileList
       * @returns {boolean}
       */
      uploadFalse (response, file, fileList) {
        this.showToal('提示', response.msg, 'error');
        return false;
      },

 

/**
       * 文件上传成功时的回调
       * @param {*} response 
       * @param {*} file 
       * @param {*} fileList 
       */
      uploadSuccess (response, file, fileList) {
        if (response.status != 200) {
          loadingInstance1 = Loading.service({fullscreen: true, text: '正在拿取返回信息~', background: 'rgba(0, 0, 0, 0.7)'});
          this.showToal('提示', response.msg, 'success');
          this.$refs['ruleForm'].clearValidate('businessContract');
          this.getList(this.page, this.search)
          loadingInstance1.close();
        } else {
          this.showToal('提示', response.msg, 'error');
          return false;
        }
      },

/**
       * 上传前对文件的大小的判断
       * @param file
       * @returns {boolean}
       */
      beforeUploadExcel (file) {
        const extension = file.name.substring(file.name.lastIndexOf(".") + 1) === "xls";
        const extension2 = file.name.substring(file.name.lastIndexOf(".") + 1) === "xlsx";
        const extension3 = file.name.substring(file.name.lastIndexOf(".") + 1) === "doc";
        const extension4 = file.name.substring(file.name.lastIndexOf(".") + 1) === "docx";
        const extension5 = file.name.substring(file.name.lastIndexOf(".") + 1) === "pdf";
        const isLt2M = file.size / 1024 / 1024 < 100;
        if (!extension && !extension2 && !extension3 && !extension4 && !extension5){
          this.showToal('警告', '上传模板只能是 xls、xlsx、doc、docx、pdf格式!', 'warning')
          return false;
        }
        if (!isLt2M) {
          this.showToal('警告', '上传模板大小不能超过 100MB!', 'warning')
          return false;
        }
        return extension || extension2 || extension3 ||  extension4 ||  extension5 || isLt2M;
      },

功能详解如下：

<el-upload
  class="upload-demo"
  action=""//引号里面填要上传的图片地址，用接口的话是公共的接口地址拼接一个图片的接口
  :on-preview="handlePreview"//图片已经上传完成时点击触发（钩子函数）
  :on-remove="handleRemove"//点击右上角X号触发的钩子函数
  :on-success="handleSuccess"//上传成功的一个钩子函数
  :file-list="fileList"//上传的文件列表，上传文件地址
  list-type="picture"//上传的文件类型，有三个参数，分别是text/picture/picture-card，分别是文本类型、图片类型、卡片类型。个人推荐选第二个较好
  :headers="headerObj"//图片上传的时候需要请求头部，我们可以定义一个变量，设置获取token信息，如下代码:
>
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
  
//存放token的变量
 headerObj: {
        Authorization: window.localStorage.getItem("token"),
      },


接下来就是它的on-preview属性，我们可以用它来实现图片预览

先要设一个图片预览的弹框：
<el-dialog
    title="图片预览"//上方的标题
    :visible.sync="previewDialogVisible"//控制显示隐藏的变量
    width="50%"//弹框的宽度占比
  >
      //img标签中的src属性接受的是点击预览时传递的图片地址
    <img :src="picPreviewPath" alt="" class="previewImg" />
  </el-dialog>

// 处理图片预览
  handlePreview(file) {//会得到一个参数，这是返回的图片的一些信息，主要的是图片的url
    this.picPreviewPath = file.response.data.url;//把url参数赋值给这个变量
    this.previewDialogVisible = true;//再让弹框显示
  },

.然后来实现点击删除图片，这时候用到了on-remove这个属性 
// 处理移除图片的操作
   handleRemove(file) {
     // 1.获取将要删除图片的临时路径
     const filePath = file.response.data.tmp_path;
     // 2.从pics数组中，找到图片对应的索引值
     const i = this.addForm.pics.findIndex((x) => x.pic === filePath);
     // 3.调用splice方法，移除图片信息
     this.addForm.pics.splice(i, 1);
   },
若项目需要提交添加的图片，则用到了它的on-success属性。
// 监听图片上传成功事件
   handleSuccess(response) {
     // 1.拼接得到一个图片信息对象 临时路径
     const picInfo = { pic: response.data.tmp_path };
     // 2.将图片信息对象，push到pics数组中
     this.addForm.pics.push(picInfo);
   },