avue主、子表单自定义图片上传

前言

最近新需求要使用vue框架,并且在主、子表单中实现图片上传显示功能.

定义slot插槽

主表单

1. action 随便写,
2. :file-list 为主表单图片绑定属性,必须为数组,如: [{name:xxx,url:http://xxx/uploda}]
3. :http-request 自定义上传方法
4. :on-exceed 图片超出限制数量回调方法
5. UploadShowFlag控制按钮显示标识属性,查看时不显示

<template slot-scope="scope" slot="imageUrlForm">
  <el-upload
    class="upload-demo"
    action="fakeaction"
    :file-list="form.imageUrls"
    :limit="1"
    :on-exceed="uploadExceed"
    :http-request="uploadAppFile"
    list-type="picture">
    <el-button v-show="UploadShowFlag" size="small" type="primary">点击上传</el-button>
    <div v-show="UploadShowFlag" slot="tip" class="el-upload__tip">只能上传png/tiff文件，且不超过5M</div>
  </el-upload>
</template>

子表单

1. 基本配置同主表单
2. :file-list=“scope.row.funImageUrls” 绑定每一行的图片上传属性
3. :http-request="(file)=>{return uploadFunctionFile(file ,scope.row)}" 自定义子表单图片上传时,(file)=>{return uploadFunctionFile(file ,scope.row)} 才能将该行的参数带到方法里

<template slot-scope="scope" slot="funImageUrlForm">
  <el-upload
    class="upload-demo"
    action="fakeaction"
    :file-list="scope.row.funImageUrls"
    :limit="1"
    :on-exceed="uploadExceed"
    :http-request="(file)=>{return uploadFunctionFile(file ,scope.row)}"
    list-type="picture">
    <el-button v-show="UploadShowFlag" size="small" type="primary">点击上传</el-button>
    <div v-show="UploadShowFlag" slot="tip" class="el-upload__tip">只能上传png/tiff文件，且不超过5M</div>
  </el-upload>
</template>

表单属性配置

主表单

{
  label: 'icon配图',
  prop: 'imageUrl',
  span: 24,
  formslot: true,
}

子表单

{
    label: 'icon配图',
    prop: 'funImageUrl',
    span: 24,
    formslot: true,
}

方法事件

主表单

1. 自定义修改附件名称
2. 图片格式校验
3. 上传后图片显示

uploadAppFile(params) {
  const  file =params.file;
  const prefix='app_';
  const  applicationId=this.form.applicationId;
  const  fileName = applicationId === '' ? prefix+file.name : prefix+applicationId+'_1'+".png";
  const isImage = file.type.indexOf("image") != -1;
  const  isLt5M = file.size / 1024 / 1024 < 5;
  if (!isImage) {
    this.$message.error("只能上传图片格式png、jpg、gif!");
    return;
  }
  if (!isLt5M) {
    this.$message.error("只能上传图片大小小于5M");
    return;
  }
  // 根据后台需求数据格式
  serviceFunupload(fileName , file).then(res => {
    if(res.data.success){
      this.$message.success("图片上传成功！");
      const appImageUrl=res.data.data.link;
      const appImageName=appImageUrl.substring(appImageUrl.lastIndexOf("/")+1,appImageUrl.length);
      this.form.imageUrl=appImageUrl;
      this.form.imageUrls= [{ name: appImageName, url: appImageUrl }];
    }else {
      this.$message.error(res.data.msg);
    }
  });
},

子表单

1. 自定义修改附件名称
2. 图片格式校验
3. 上传后对该行进行图片显示

uploadFunctionFile(params, row) {
  const  file =params.file;
  const prefix='fun_';
  const  fileName = row.functionId === '' ? prefix+file.name : prefix+row.functionId+'_1'+".png";
  const isImage = file.type.indexOf("image") != -1;
  const  isLt5M = file.size / 1024 / 1024 < 5;
  if (!isImage) {
    this.$message.error("只能上传图片格式png、jpg、gif!");
    return;
  }
  if (!isLt5M) {
    this.$message.error("只能上传图片大小小于5M");
    return;
  }
  // 根据后台需求数据格式
  serviceFunupload(fileName , file).then(res => {
    if(res.data.success){
      this.$message.success("图片上传成功！");
      const funImageUrl=res.data.data.link;
      const funImageName=funImageUrl.substring(funImageUrl.lastIndexOf("/")+1,funImageUrl.length);
      row.funImageUrl= res.data.data.link;
      row.funImageUrls= [{ name: funImageName, url: funImageUrl }];
    }else {
      this.$message.error(res.data.msg);
    }
  });
}

uploadExceed

uploadExceed() {
  this.$message.error("每次只能上传一个文件，请先移除再上传");
},

后端请求

//附件上传
export const serviceFunupload = (fileName, file) => {
  const directory ='xxxxx'
  const formData = new FormData();
  formData.append('file', file);
  formData.append('fileName', directory+fileName);
  return request({
    headers: {
      "Content-Type": "multipart/form-data"
    },
    url: '/api/xxx/endpoint/put-file-attach-by-name',
    method: 'post',
    data: formData
  })
}

效果展示