今天遇到一个需求，就是要实现拖拽上传文件，并调用渲染方法，将渲染后的链接通过二维码展示出来。

上一篇文章也是关于拖拽上传，但是接口是通过后端提供的上传方式来实现的，并非是直接调用阿里OSS来直接实现的。

1.拖拽上传

实现方法参考：
antd上传组件upload+阿里oss实现上传功能：http://t.csdn.cn/wffiO

直接借用文章中的第二步骤即可

2.复制内容到剪切板——vue-clipboard2插件的使用

2.1 安装插件vue-clipboard2

npm install --save vue-clipboard2

2.2 在main.js中引入依赖

import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

2.3 直接通过this.$copyText来复制内容

handleCopy(val) {
  this.$copyText(val)
    .then(() => {
      this.$message.success('复制成功')
    })
    .catch(() => {
      this.$message.success('复制失败')
    })
},

2.4 渲染的方法：主要是记录一下步骤，接口需要后端提供才可以

渲染可能有延迟，因此需要重复去渲染，直到渲染成功为止

getfilePathMd5(filepath, callback) {
  getFileDetail({
    filePath:filepath
  }).then(res=>{
    this.filePathMd5 = res.filePathMd5;
    callback && callback(res.filePathMd5);
  })
},
getFileLookUrl(data) {
  this.n+=1;
  getFileTaskstatus(data).then(res=>{
      this.lookUrlParam = res;
    })
  },
handleRender(){
  if(!this.form.file){
    this.$message.error('请输入文件路径或网址');
    return
  }
  this.loading = true;
  this.getfilePathMd5(this.form.file, (data)=> {
        this.getFileLookUrl(data)
  })
  this.n = 0;
  this.timerT = setInterval(()=> {
     if(this.lookUrlParam.previewURL)
     {
     	this.loading = false; 
     }
     if ((!this.lookUrlParam.previewURL||!this.lookUrlParam.imgURL) && this.n <= 30) {
         this.getFileLookUrl(this.filePathMd5)
     } else {
         clearInterval(this.timerT);
         this.n = 0;
         this.loading = false;
     }
  }, 3000)//每隔3秒调用一次，直到调用30次后，如果还是没有渲染出来，则直接不再循环渲染。
}

完成！！！多多积累，多多收获！！！