附件管理2(上传的逻辑)

接1: 获取到接口里的数据之后,需要可以进行文件的上传,
点击上传文件,出现弹窗
骨架是这么写的:

在这里插入代码片
<el-dialog
      title="上传附件"
      :visible.sync="open"
      width="500px"
      append-to-body
    >
      <el-upload
        ref="upload"
        :limit="5"
        :data="upload.data"
        accept=".xlsx, .xls ,.png ,.jpg ,.doc ,.pdf ,.docx"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
      >
        <div>
          <span style="margin-right: 10px">上传附件</span>
          <el-button slot="trigger" size="small">选择文件</el-button>
          <span style="margin-left: 10px">未选择任何文件</span>
        </div>
      </el-upload>
      <p>文件类型为.xlsx, .xls ,.png ,.jpg ,.doc ,.pdf ,.docx。</p>
      <el-form>
        <el-row>
          <el-col :span="8">
            <el-form-item label="备注">
              <el-input
                placeholder="请输入备注"
                size="small"
                clearable
                v-model="addOssQuery.remark"
                width="150px"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doSave">确 定</el-button>
        <el-button @click="close">取 消</el-button>
      </div>
    </el-dialog>

在data的return中这么写:

在这里插入代码片
 upload: {
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的专项信息数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/system/oss/ossUpload",
        data: { pathPrefix: "gyzcjg" },
      },

data的return 中需要注意的就是 url的 后面的上传路径 后端需要提供
还有就是需要传递一个data对象(也是后端要求的 这个要根据后端的要求来看)
也是后台需要的 需要pathPrefix 这个参数
这样上传之后 后台就可以自动建立一个文件夹

当点击了确定的按钮, 需要调用一个element-ui的原生的办法submit(),调用这个方法上传到服务器之后,oss服务器会返回一个文件的url地址,当然上传成功的同时,会触发成功的钩子函数,也可以拿到这个url 的 地址

在这里插入代码片
 doSave() {
      this.$refs.upload.submit();
      //需要重点理解的就是 先调用submit的方法,后触发的上传成功的钩子函数
      //触发上传成功的钩子函数之后 才能拿到后台需要的 url的地址  
 },

然后还会触发成功的钩子函数,在这个里面 执行增加的 ajax请求,主要是这个请求发送的时候 需要的参数有 上个页面传递过来的 type , id , 以及上传成功后 oss服务器传递回来的url地址,**这个url地址其实就是在上传成功之后触发的成功的钩子函数中拿到的,**所以我又新建了一个对象addOssQuery , 来发送增加的ajax请求 , 添加成功之后,在去调用1 getList的办法 重新获取 接口中的数据====> 至此 上传功能已经搞定

在这里插入代码片
handleFileSuccess(response, file, fileList) {
      console.log(file);
      console.log(response);
      console.log(fileList);

      this.addOssQuery.fileName = file.name; //文件名称
      this.addOssQuery.size = file.size; //文件大小
      this.addOssQuery.url = response.data.url; //oss返回的地址
      (this.addOssQuery.businessId = this.$route.query.businessId),
        (this.addOssQuery.businessType = this.$route.query.businessType),
        //发送增加的ajax请求
        addOss(this.addOssQuery).then((res) => {
          console.log(res);

          if (res.code === 200) {
            this.msgSuccess("新增成功");
          }
          this.open = false;
          this.getList();
        });
    },