Vue el-upload 写上传下载

<template>
  <div>
    <el-card>
      <div slot="header">
        <span/>
      </div>
      <el-form
        ref="form"
        :model="attachNotesInfo"
        label-width="100px"
        class="demo-ruleForm"
        size="mini">
        <div class="clearfix">
          <div class="is-clearfix clearfixs-max4-2">
            <!-- 订单附件 -->
            <el-form-item
              :label="$t('orderCen.orderList.orderAttachment') + ':'">
              <span>
                <el-upload
                  ref="upload"
                  // 是否显示已上传文件列表
                  :show-file-list="true"
                  //上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
                  :before-upload="beforeUpload"
                  //文件列表移除文件时的钩子
                  :on-remove="removeUpload"
                  //点击文件列表中已上传的文件时的钩子
                  :on-preview="handlePreview"
                  //存储页面显示的列表文件数据,上传的文件列表是个array, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
                  :file-list="fileList"
                  //是否在选取文件后立即进行上传
                  :auto-upload="true"
                  class="upload-demo"
                  action="">
                  <el-button
                    slot="trigger"
                    type="primary"
                    size="small">{{ $t('orderCen.common.btnUpload') }}
                  </el-button>
                </el-upload>
                &nbsp;
            </span></el-form-item>
          </div>
        </div>
      </el-form>
  </div>

</template>
<script>
import ShowData from '@/components/jlComponents/showData'
import { formatDate, parseDate } from '~/utils/dateUtils'
import { mapGetters, mapActions } from 'vuex'
import ruler from '~/utils/ruler'
export default {
  name: 'OrderMagDetail',
  components: {
    ShowData
  },
  data() {
    return {
      attachNotesInfo: {
        // 备注
        businessRemark: '',
        customerRemark: '',
        platformRemark: '',
        customPoNumber: '',
        id: '',
        orderId: '',
        operationTime: '',
        operationUser: '',
        orderId: '',
        // 附件
        appendix: []
      },
      creatSign: false,
      appendixForm: {
        appemdixList: [],
        name: ''
      },
      // 输入框值
      diLogInfo: {
        // 商家备注
        businessRemark: '',
        // 客户备注
        customerRemark: '',
        // 平台备注
        platformRemark: '',
        // po备注
        customPoNumber: ''
      },
      fileUrls: [],
      fileList: [],
      attachNotes: {
        // 订单取消
        createTime: '',
        createUser: '',
        cancelReason: '',
        remark: ''
      },
      list: null,
      dialogStatus: '',
      rules: {},
      clientPoFlag: false,
      clientRemarkFlag: false,
      storeRemarkFlag: false,
      platRemarkFlag: false
    }
  },
  computed: {
    ...mapGetters('orderCen/orderMagDetail', []),
    ...mapGetters('orderCen/orderMagDetail', {
      temp: 'detailInfo'
    })
  },
  created() {
    this.searchList()
    this.rules = {
      customPoNumber: [
        ruler.commonWord('客户PO号不允许输入特殊字符！', 'change')
      ],
      customerRemark: [
        ruler.commonWord('客户备注不允许输入特殊字符！', 'change')
      ],
      businessRemark: [
        ruler.commonWord('商家备注不允许输入特殊字符！', 'change')
      ],
      platformRemark: [
        ruler.commonWord('平台备注不允许输入特殊字符！', 'change')
      ]
    }
  },
  methods: {
    ...mapActions('orderCen/orderMagDetail', [
      'findRemarkInfo',
      'findUpdatePoNum',
      'upLoadPicFromWeAppFun',
      'findRemarkSave',
      'findRemarkSaveAppendix',
      'removeUploadById'
    ]),
    // 查询列表
    searchList() {
      this.findRemarkInfo({ orderId: this.id })
        .then(res => {
          if (res.res === 'success') {
        
            let params = {}
            for (let i = 0; i < res.data.appendix.length; i++) {
              params = JSON.parse(res.data.appendix[i].appemdix)
              this.fileList.push({
                uid: params.uid,
                id: res.data.appendix[i].id,
                name: res.data.appendix[i].appemdixName,
                url: res.data.appendix[i].appemdix
              })
              this.appendixForm.appemdixList.push({
                name: res.data.appendix[i].appemdixName,
                url: params.url,
                thumbUrl: params.thumbUrl,
                uid: params.uid
              })
            }
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(e => {
          this.$message.error(this.$t('orderCenMsg.catchError'))
        })
    },
    // 下载文件方法file参数为已上传文件的信息，其实就是取得fileList里的值
    handlePreview(file, fileList) {
      let params = {}
      params = JSON.parse(file.url)
      let type = params.url.split('.')[4]
      if (
        type === 'doc' ||
        type === 'docx' ||
        type === 'xlsx' ||
        type === 'xls' ||
        type === 'ppt' ||
        type === 'pptx'
      ) {
//在當前瀏覽器頁面直接下載
        document.location.href = params.url
      } else {
//圖片會直接在瀏覽器中打開所以，打開新的頁面
        window.open(params.url, 'hello')
      }
    },
    // 删除文件方法
    removeUpload(file, fileList) {
      // 删除页面显示的数据
      this.fileUrls.forEach((item, i) => {
        if (item.uid === file.uid) {
          this.fileUrls.splice(i, 1)
        }
      })
      // 根据生成的id删除数据库中的数据
      if (file.id) {
        this.removeUploadById({ id: file.id })
          .then(res => {
            if (res.res === 'success') {
            } else {
              this.$message.error(res.msg)
            }
            this.creatSign = false
          })
          .catch(e => {
            this.$message.error(this.$t('orderCenMsg.catchError'))
            this.creatSign = false
          })
      }
    },
    // 上传文件的方法，file会获取文件信息内容
    // 因为每次store中返回的数据是一个promise對象,所以可以連續then
    // 因为上传会保存到数据库中，之后需要获取后台生成的id，所以需要再次把数据库中数据查询出来。
    // 因为是异步，所以插入数据库与查询数据库会出现问题，这里可以使用连续then的方式解决，这里利用ES7中新提出async搭配await解决，因为连续then打印会出现问题
    async beforeUpload(file) {
      let name = file.name
      let uid = file.uid
      let isLt60M = file.size / 1024 / 1024 < 60
      let isPic = true
      if (isLt60M) {
        let formData = new FormData()
        formData.append('file', file)
        formData.append('path', '0532935596537417728')
        formData.append('percent', '0.2')
        let uploadData = {
          formData: formData
        }
        if (
          file.type === 'image/jpeg' ||
          file.type === 'image/png' ||
          file.type === 'image/jpg' ||
          file.type === 'image/bmp' ||
          file.type === 'image/gif'
        ) {
          uploadData.path = '/upload/image/percent'
        } else {
          isPic = false
          uploadData.path = '/upload/file'
        }
        // 将文件上传到文件服务器中
        let res = await this.upLoadPicFromWeAppFun(uploadData)
        if (isPic) {
          this.fileUrls.push({
            name: name,
            url: res.data.data.imageUrl,
            thumbUrl: res.data.data.thumbImageUrl,
            uid: uid
          })
        } else {
          this.fileUrls.push({
            name: name,
            url: res.data.data,
            thumbUrl: res.data.data,
            uid: uid
          })
        }
        for (let i = 0; i < this.fileUrls.length; i++) {
          this.appendixForm.appemdixList.push({
            name: this.fileUrls[i].name,
            url: this.fileUrls[i].url,
            thumbUrl: this.fileUrls[i].thumbUrl,
            uid: this.fileUrls[i].uid
          })
        }
        this.fileUrls = []
        // 保存上传
        let param = {
          orderId: this.id,
          appemdixList: JSON.stringify(this.appendixForm.appemdixList)
        }
        this.creatSign = true
        // 保存到数据库
        res = await this.findRemarkSaveAppendix(param)

        if (res.res === 'success') {
        } else {
          this.$message.error(res.msg)
        }
        this.creatSign = false
        // 重新查询数据库
        await this.findRemarkInfo({ orderId: this.id }).then(r => {
          if (r.res === 'success') {
            this.fileList = []
            this.appendixForm.appemdixList = []
            let params = {}
            for (let i = 0; i < r.data.appendix.length; i++) {
              params = JSON.parse(r.data.appendix[i].appemdix)
              this.fileList.push({
                uid: params.uid,
                id: r.data.appendix[i].id,
                name: r.data.appendix[i].appemdixName,
                url: r.data.appendix[i].appemdix
              })
              this.appendixForm.appemdixList.push({
                name: r.data.appendix[i].appemdixName,
                url: params.url,
                thumbUrl: params.thumbUrl,
                uid: params.uid
              })
            }
          } else {
            this.$message.error(r.msg)
          }
        })
      } else {
        return false
      }
    }
  }
}
</script>