iview实现图片上传功能

1.上传图片时，调用后端接口时，后端要返回图片的名称或者是图片的完整路径，以下我在调上传接口的时候是返回图片的完整路径。

2.案例，需求是，选中一条数据，然后点击修改，打开修改弹窗，如果其有图片就显示之前的图片，然后可以对这些图片进行添加，删除操作，然后保存。

那么首先来说一下一些最主要的方法吧

本人讲的也不是很清晰，但在上传图片时主要的思路是，首先执行handleBeforeUpload这个函数，比如限制图片的上传个数，上传成功之后即执行了handleSuccess函数从后端拿到图片的名称或者全路径，把它push到uploadList里，然后显示，保存的话，也是从这个uploadList里拿数据出来，多张图片的话，一般都要分割，我就是以","分割的，拿到这些数据之后以“，”拼接成一个字符串，保存到数据库里。

3.弹框

查看

删除

部分data

4.前端代码
1）上传控件

        <formItem label="问题图片">
          <div class="demo-upload-list" v-for="item in uploadList">
            <template v-if="item.status === 'finished'">
              <img :src="item.url">
              <div class="demo-upload-list-cover">
                <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
                <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
              </div>
            </template>
            <template v-else>
              <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
            </template>
          </div>
          <Upload
            ref="upload"
            :show-upload-list="false"
            :default-file-list="defaultList"
            :on-success="handleSuccess"
            :format="['jpg','jpeg','png']"
            :max-size="2048"
            :on-format-error="handleFormatError"
            :on-exceeded-size="handleMaxSize"
            :before-upload="handleBeforeUpload"
            multiple
            type="drag"
            :action="fileUploadPath"
            style="display: inline-block;width:58px;">
            <div style="width: 58px;height:58px;line-height: 58px;">
              <Icon type="ios-camera" size="20"></Icon>
            </div>
          </Upload>
          <Modal title="View Image" v-model="visible">
            <img :src="this.fileDownLoadPath + imgName" v-if="visible" style="width: 100%">
          </Modal>
        </formItem>
      </Form>

2）编辑弹框
3）修改方法

 // 修改反馈信息
    editFed () {
      if (this.selected.length < 1) {
        return this.$newMessage['error']({
          content: '请选择一条数据',
          duration: 0,
          background: true,
          closable: true
        })
      }
      if (this.selected.length > 1) {
        return this.$newMessage['error']({
          content: '仅支持操作一条数据',
          duration: 0,
          closable: true
        })
      }
      if (this.selected.length === 1) {
        this.feedbackModal = true
        this.uploadList = []
        this.feedback.questionImg = ''
        this.$api.getFeedback(this.selected[0].id, this._getFeedback)
      }
    },

    _getFeedback (res) {
      if (res.data.code === 200) {
        this.selectMenuList()
        this.feedback = res.data.data
        this.feedback.questionType = this.feedback.questionType + ''
        if (this.feedback.questionImg !== null && this.feedback.questionImg !== '') {
        //this.feedback.questionImg这里得到的是一个以“,”分割的字符串，我们这里分割出来的是每一张图片的完整路径，然后赋值给photots数组
          this.photo.photots = this.feedback.questionImg.split(',')
          this.selectPhotoByOne()
        }

      } else {
        this.$newMessage['error']({
          content: res.data.msg,
          duration: 0,
          background: true,
          closable: true
        })
      }
    },

4）slectPhotoByOne方法

selectPhotoByOne () {
	//这里的n是图片的完整路径
      this.photo.photots.forEach(n => {
        let tempName = ''
        let path = ''
        let params = n.split('\\')
        for (let item of params) {
          if (item === params[params.length - 1]) {
            tempName = item
          } else {
            path += item + '\\'
          }
        }
        this.fileDownLoadPath = path
        let pto = {}
        pto.name = n
        pto.url = n
        pto.percentage = 100
        pto.status = 'finished'
        this.uploadList.push(pto)
      })
    },

5）上传控件的一些方法

	//查看图片
    handleView (name) {
      this.imgName = name
      this.visible = true
    },
    //删除图片
    handleRemove (file) {
      const uploadList = this.uploadList
      this.uploadList.splice(uploadList.indexOf(file), 1)
    },
    //图片上传成功后执行
    handleSuccess (res) {
      // 拿到图片的完整路径，切割
      let params = res.msg.split('\\')
      let fileUrl = ''
      let fileName = ''
      for (let item of params) {
        if (item !== params[params.length - 1]) {
          fileUrl += item + '\\' // 图片的路径
        } else {
          fileName = item // 图片的名称
        }
      }
      this.fileDownLoadPath = fileUrl // 下载图片目录地址
      fileUrl += fileName // 下载图片的完整地址
      //构造一个file,规定要有status,url和name
      let file = {url: '', name: '', status: '', percentage: 100}
      file.status = 'finished'
      file.url = fileUrl //图片的完整路径
      file.name = fileName//图片的名称
      this.uploadList.push(file) //将file存到数组里
    },
    //图片上传异常时执行
    handleFormatError (file) {
      this.$Notice.warning({
        title: '图片格式不正确',
        desc: '图片 ' + file.name + '格式不正确,请选择jpg/png.'
      })
    },
    //上传的图片大于自己指定的大小后执行
    handleMaxSize (file) {
      this.$Notice.warning({
        title: '图片大小限制',
        desc: '图片  ' + file.name + '太大, 不能超过5M.'
      })
    },
    //图片上传之前执行
    handleBeforeUpload () {
      const check = this.uploadList.length < 5
      if (!check) {
        this.$Notice.warning({
          title: '最多只能上传5张图片'
        })
      }
      return check
    },