element - Upload

上传    ==>    HTML：

    上传成功的，数据结构： 

        <el-upload

              :before-remove="beforeRemove"

              :before-upload="checkFileType"

              :on-success="fileChange"

              :on-exceed="exceedUpload"

              :on-change="onChange"

              :on-remove="onRemove"

              :file-list="fileListData"

              :headers="requestHeader"

              :action="uploadUrl"

              :limit="5"

              multiple

              class="upload-demo">

              <el-button size="small" type="primary">上传</el-button>

            </el-upload>

        详情中，返回数据的展示：

            <div class="upload">

                  <p v-for="(item, index) in paramForm.additionInfo.attachmentUrl" :key="index">

                        <i class="el-icon-document">&nbsp;&nbsp;{{ item.fileName }}</i>

                        <span>

                              <a :href="fileDownloadUrl + '?fileId=' + item.fileId + '&fileIndexName=' + item.fileIndexName" class="el-icon-bottom"/>

                              <i v-if="!detail " class="el-icon-close" @click="removeFile(item, index)"/>

                        </span>

                  </p>

                </div>

上传的   ==  》  Style： 

  .upload {

        width: 100%;

        p {

              padding: 0 5px;

              line-height: 25px;

              display: flex;

              justify-content: space-between;

              color: #606266;

          }

      }

上传的  == 》   Data： 

data: {

    requestHeader： {

        'x-auth-token':    ’请求头获取‘ 

    }

    return {

          fileListData: [],          //   上传成功的fileList

          uploadUrl: '',           //   上传的 action

          fileDownloadUrl: '',    //   下载的 action

    }

}

上传的   ==》   Method：

mounted() {

    this.fileUrlchange()

  },

methods: {

    //   动态 获取路径

    fileUrlchange() {

       this.uploadUrl = `动态路径  +  接口地址`             // 上传路径拼接 

       this.fileDownloadUrl = `动态路径   +   接口地址`        // 下载路径拼接

    },

    //  上传调用 

    fileChange(response, file, fileList) {

            const { successFlag, data } = response

            const { uid } = file

           if (successFlag) {

                const existFile = _.find(this.fileListData, { uid })

                existFile.fileKey = data.fileKey

                this.fileListData = [...this.fileListData]

          } else {

               this.fileListData = _.filter(this.fileListData, item => item.uid !== uid)

               this.$message.error(response.message)

          }

      },

    //  删除数据

    onRemove(file, fileList) {

          const { uid } = file

          this.fileListData = _.filter(this.fileListData, item => item.uid !== uid)

    },

    //  删除上传的 二次提示：

        beforeRemove(file, fileList) {

              if (file.status === 'ready') {

                    return true

              }

              return this.$confirm(`Do you want to delete ${file.name}？`)

        },

      //   删除detail   返回的某个数据： 

       removeFile(item, index) {        //  删除方法 

           this.paramForm.additionInfo.attachmentUrl.splice(index, 1)     //   根据下标 截取 删除

        },

        //   添加提示语：  

        exceedUpload(file) {

          this.$message.error('Upload up to 5 files')        //   当初据长度大于   5 提示

        },

       // 判断类型

        checkFileType(file) {

                  const compliance = /\.(pdf|txt|csv|jpg|doc|docx|xlsx|xls)$/.test(file.name)

                  return compliance

        },

        //  上传前，后调用

        onChange(file, fileList) {

                if (file.status === 'ready') {

                    const valid = this.checkFileType(file)

                    if (valid) {

                          this.fileListData = [...this.fileListData, file]

                    } else {

                          this.$message.error('File type not allowed')

                    }

              }

        }