上传图片过程中，关闭了弹框如何取消上传

2019-11-04 15:52:46 阅读：394 来源： 互联网

标签：axios file img 弹框 source 关闭 message 上传

在开发过程中遇到了这种情况，当在新建某个内容时（弹框展示），图片上传过程中若是关闭的弹框图片仍然在上传可能导致一些错误的发生

两种解决方案：

1 图片上传完成之前讲关闭或提交或取消的按钮都置为不可用的状态，这样就避免了上面情况的发生；

2 关闭弹框时取消图片的上传

这里需要引入axios 的 source 的token

<template>
  <div class="app-container">
    <div class="search-container">
      <el-button type="primary" plain @click="handleNew()">新建</el-button>
    </div>
    <el-dialog
      title="新建"
      :close-on-click-modal="!dialogVisible"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="newFormModel" :model="newObj" :rules="rules">
        <el-form-item class="my-el-form-item" prop="img" label="logo">
          <el-upload
            ref="fileupload"
            class="avatar-uploader"
            action
            :limit="1"
            :disabled="uploadLoading"
            :show-file-list="false"
            :http-request="getFile"
            :on-success="handleAvatarSuccess"
            accept=".png, .jpg"
          >
            <img v-if="newObj.img&&newObj.img.length>0" :src="newObj.img" class="avatar" />
            <el-button
              :class="newObj.img?'buttonIconC':''"
              :disabled="uploadLoading"
              size="small"
              type="primary"
            >点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <!-- 方案一的解决方案 下面相关source 的内容删掉既可-->
        <!-- <el-button :disabled="uploadLoading" @click="handleClose()">取 消</el-button>
        <el-button type="primary" :disabled="uploadLoading" @click="newSubmit()">确 定</el-button>-->
        <!-- 方案二 -->
        <el-button @click="handleClose()">取 消</el-button>
        <el-button type="primary" @click="newSubmit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { uplaodImageApi } from '@/api/apiFile'
export default {
  data() {
    return {
      CancelToken: null,
      source: null,
      dialogVisible: false,
      uploadLoading: false,
      rules: {
        img: [
          { required: true, message: '请选择需要上传的ogo', trigger: 'change' }
        ]
      },
      newObj: {
        img: ''
      }
    }
  },
  watch: {
    // 监控当 上传文件过程中突然关闭弹框 取消文件的上传 uploadLoading表示是否在上传中
    dialogVisible: function(newVal, oldVal) {
      if (newVal === false && oldVal === true && this.uploadLoading) {
        // 取消请求（message 参数是可选的）
        this.source.cancel('Image upload cancelled.')
        // 取消上传之后做一些初始化工作
        this.resetForm()
      }
    }
  },
  beforeMount() {
    this.CancelToken = this.axios.CancelToken
    this.source = this.CancelToken.source()
  },
  methods: {
    handleNew() {
      this.dialogVisible = true
    },
    resetForm() {},
    handleClose() {
      this.dialogVisible = false
    },
    newSubmit() {},
    uplaodImageFile(img) {
      const _self = this
      const formData = new FormData()
      formData.append('file', img)
      this.source = this.CancelToken.source()
      uplaodImageApi(formData, this.source.token)
        .then(response => {
          this.$message({
            message: 'Upload success',
            type: 'success'
          })
          this.newObj.img = response.data.url
          //上传成功之后 清空表单验证中的部分img内容
          this.$refs['newFormModel'].clearValidate('img')
          setTimeout(function() {
            _self.handleAvatarSuccess()
          }, 2000)
        })
        .catch(msg => {
          if (this.axios.isCancel(msg)) {
            // 注意：在此处清空source 因为 不清空会使下次的请求 会被默认取消
            this.source = {}
            console.log('Request canceled', msg)
          } else {
            this.$message({
              message: msg || 'Upload Error',
              type: 'error'
            })
            this.handleAvatarSuccess()
          }
        })
    },
    getFile(value) {
      this.uploadLoading = true
      const img = value.file
      if (this.beforeAvatarUpload(img)) {
        this.uplaodImageFile(img)
      } else {
        this.handleAvatarSuccess()
      }
    },
    handleAvatarSuccess(res, file) {
      this.uploadLoading = false
      this.$refs['newFormModel'].validateField('img')
      this.$refs.fileupload.clearFiles()
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG或PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M && (isJPG || isPNG)
    }
  }
}
</script>

注意：在过程中可以会报错 Cannot read property 'source' of undefined

上面错误原因在于引入axios方式不对，上面的source 也可能是protool 或者 CancelToken都是因为在注入axios时方式不对

axios 并不是 vue的插件而是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中；所以使用时不能使用 Vue.use（axios），如此使用会报上面的错误；

需要将axios 绑定到 vue实例的原型上面

import axios from 'axios'
Vue.prototype.axios = axios

参考文档：

http://www.axios-js.com/zh-cn/docs/

https://github.com/axios/axios

标签：axios,file,img,弹框,source,关闭,message,上传
来源： https://www.cnblogs.com/xhliang/p/11792426.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

上传图片过程中，关闭了弹框 如何取消上传

上传图片过程中，关闭了弹框如何取消上传