I encountered a requirement today, which is to implement drag and drop upload files, and call the rendering method to display the rendered link through a QR code.
The previous article is also about drag and drop uploading, but the interface is implemented through the upload method provided by the backend, not by directly calling Ali OSS.
1. Drag and drop to upload
Implementation method reference:
antd upload component upload + Ali oss to realize the upload function: http://t.csdn.cn/wffiO
Just borrow the second step in the article directly
2. Copy the content to the clipboard - vue-clipboard2the use of plug-ins
2.1 Install the pluginvue-clipboard2
npm install --save vue-clipboard2
2.2 main.jsIntroducing dependencies in
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
2.3 this.$copyTextCopy content directly via
handleCopy(val) {
this.$copyText(val)
.then(() => {
this.$message.success('复制成功')
})
.catch(() => {
this.$message.success('复制失败')
})
},
2.4 Rendering method: mainly to record the steps, the interface needs to be provided by the backend
Rendering may be delayed, so it needs to be rendered repeatedly until the rendering is successful
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次后，如果还是没有渲染出来，则直接不再循环渲染。
}
Finish! ! ! A lot of accumulation, a lot of harvest! ! !