多文件上传及详情渲染

1.以阿里云为例，先创建api文件

import request from '@/utils/request'

// 上传文件到阿里云
export function uploadOssFile(file,type) {

    let param = new FormData(); //创建form对象
    param.append("file",  file);
    return request({
        url: '/ossService/Certification?type='+ type,
        headers: { // 设置请求头
            "Content-Type": file.type === 'text/plain' ? 'txt/plain;charset=utf-8' : "multipart/form-data"
        },
        dataType: 'JSON',
        cache: false, // 不缓存
        processData: false, // jQuery不要去处理发送的数据
        contentType: false,
        method: 'post',
        timeout: 100 * 1000,
        data: param,
        success: function(res) {
            //console.log(res)
        }
    })
}

//根据文件名下载文件
export function downloadOssFile(name) {
    return request({
        url: '/ossService/filedownload?fileName=' + name,
        method: 'get'
    })
}

//根据文件名下载文件
export function deleteOssFile(name) {
    return request({
        url: '/ossService/filedelete?fileName=' + name,
        method: 'get'
    })
}

2.引入页面

import { uploadOssFile } from "@/api/system/oss";

3.设定上传文件和预览方法

return {
      img: "", // 预览图片地址
      fileList: [], // 上传的图片地址
      srcList: [],
      imgopen: false, //  是否是图片预览
      loading: false, // 遮罩层
    };

// 上传文件
    Uploadile(file) {
      // 允许上传的文件格式列表
      let acceptList = [
        "jpg",
        "jpeg",
        "png",
        "gif",
        "doc",
        "docx",
        "pdf",
        "xlsx",
        "xls",
      ];
      // 根据文件名获取文件的后缀名
      let fileType = file.name.split(".").pop().toLowerCase();
      // 判断文件格式是否符合要求
      if (acceptList.indexOf(fileType) === -1) {
        this.$message.error("上传文件类型不正确!");
        return false;
      }
      this.uploadFile(file);
    },
    uploadFile(file) {
      uploadOssFile(file, "mt").then((response) => {
        if (response.response == "success") {
          this.msgSuccess("上传成功");
          this.fileList.push(response);
          this.formData.collectionVoucher = this.fileList;
        }
      });
    },
    // 预览
    yulan(val) {
      this.img = "";
      this.srcList = [];
      this.imgopen = false;
      let value = val.split(",")[0];
      let valueFormat = value.substring(value.lastIndexOf(".") + 1);
      if (
        valueFormat == "doc" ||
        valueFormat == "docx" ||
        valueFormat == "xls" ||
        valueFormat == "xlsx"
      ) {
        window.open(
          "https://view.officeapps.live.com/op/view.aspx?src=" + value,
          "_blank"
        );
      } else if (valueFormat == "txt" || valueFormat == "pdf") {
        window.open(value, "_blank");
      } else if (
        valueFormat == "jpg" ||
        valueFormat == "png" ||
        valueFormat == "jpeg" ||
        valueFormat == "gif"
      ) {
        this.img = value;
        this.imgopen = true;
        this.srcList[0] = value;
      }
    },

4.在HTML里设置上传和删除附件功能

              <el-form-item label="附件上传">
                <el-upload
                  action=""
                  class="avatar-uploader"
                  multiple
                  :before-upload="(file) => Uploadile(file)"
                >
                  <el-button size="small" icon="el-icon-upload2"
                    >点击上传</el-button
                  >
                  <div slot="tip" class="el-upload__tip">
                    支持上传图片、pdf、doc、docx、xls、xlsx文件
                  </div>
                </el-upload>
                <div
                  class="pdf mb"
                  v-for="(item, index) in fileList"
                  :key="item.uid"
                >
                  <div class="img_url" @click.prevent="yulan(item.name)">
                    {{ urlName(item.name) }}
                  </div>
                  <el-button
                    size="mini"
                    type="text"
                    @click="beforeRemove(item, index)"
                    >删除</el-button
                  >
                </div>
              </el-form-item>

5.提交页面时处理上传路径，需要改为字符串形式

submitForm() {
      // 上传
      let enclosureList = [];
      this.fileList.forEach((item) => {
        enclosureList.push(item.name);
      });
      this.formData.collectionVoucher = enclosureList.join(); //处理多图上传
      this.$refs["formData"].validate(async (valid) => {
        if (valid) {
          this.loading = true;
          try {
            await addClaim(this.formData);
            this.msgSuccess("新增成功");
            this.$router.push("collection");
          } catch (error) {
            this.msgError("新增失败");
          } finally {
            this.loading = false;
          }
        }
      });
    },

6.在详情页处理渲染格式

// 数据
    getlist(id) {
      getCollection(id).then((response) => {
        this.formData = response.data;
        // 处理多图上传
        this.formData.collectionVoucher = response.data.collectionVoucher.split(',')
      });
    },

            <div>
              <div
                v-for="item in formData.collectionVoucher"
                :key="item.uid"
                @click.prevent="yulan(item)"
              >
                {{ urlName(item) }}
              </div>
            </div>

7.展示结果