ivew 上传组件手动上传

1：在做项目的时候总会遇到上传功能，我这里使用iview 的upload组件手动上传

2：js 代码如下所示

 <FormItem label="照片:" prop="area">
          <div class="demo-upload-list" v-for="(item,index) in imageUrls" :key="index">
            <template>
              <img :src="item">
              <div class="demo-upload-list-cover">
                <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                <Icon type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>
              </div>
            </template>
          </div>
          <!-- upload -->
          <Upload ref="upload" :show-upload-list="false"
            :format="['jpg','jpeg','png']" :max-size="2048" :on-exceeded-size="handleMaxSize"
            :before-upload="handleUpload" multiple type="drag" action="" 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="图片详情" v-model="visible">
            <img :src="currentUrl" v-if="visible" style="width: 100%">
          </Modal>
          <span class="tip">只支持 .jpg .png 等格式，最多6张</span>
        </FormItem>

 .tip {
    position: absolute;
    bottom: -28px;
    left: 0;
    color: #ff9900;
  }

在这里插入代码片

 handleUpload(file) {
        if (this.imageUrls.length >= 6) {
          this.$message({
            type: 'warning',
            message: '最多只能上传6张图片!'
          });
          return
        }
        upload(file).then(res => {
          let {
            name,
            fullPath
          } = res;
          let url = fullPath.replace('22122', '80');
          this.imageUrls.push(url);
        }).catch(err => {

        });

      },

 handleView(item) {
        this.visible = true;
        this.currentUrl = item;
      },
      handleRemove(index) {
         this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
           this.imageUrls.splice(index, 1);
        }) 
      },

export const upload = (file) =>{
  let param = new FormData();
  param.append('file',file);
  return request.post(API.uploadUrl,param,{headers:{'Content-Type':'multipart/formdata'}}).then(res=>{
    return Promise.resolve(res)
  })
}