子组件：
我要评论<template>
<div class="upload-area-div">
<upload
:type="uptype"
class="upload-area"
:show-upload-list="false"
:before-upload="beforeupload"
:action="uploadurl">
<slot></slot>
</upload>
<!-- 上传弹窗 -->
<modal
title="上传"
class-name="flex-center-modal opera-modal not-footer"
v-model="uploadmodal"
:mask-closable="false"
@on-cancel="closeupmodal">
<div class="upload-progress">
<p class="file-name">{{filename}}</p>
<progress class="modu-progress" :percent="filepercent" :stroke-width="3"></progress>
<div class="progress-btn">
<button type="ghost" size="large" class="modu-ghost-btn" v-show="filepercent !== 100" @click="closeupmodal">取消</button>
<!-- <button type="primary" size="large" class="modu-primary-btn" v-show="filepercent === 100" @click="oncomplete">完成</button> -->
</div>
</div>
</modal>
<!-- loading提示 -->
<spin size="large" fix v-if="loadflag" class="modu-spin">
<icon type="load-c" size=18 class="modu-spin-icon-load"></icon>
<div class="modu-spin-text">loading</div>
</spin>
</div>
</template>
<script type="text/ecmascript-6">
export default {
props: {
uptype: { // 是否允许拖拽上传,select为点击上传
type: string,
default: "drag"
},
uploadurl: { // 上传文件接口
type: string,
default: "/example/api/file"
},
fileformat: { // 允许上传的文件类型后缀
type: array,
default: function() {
return ['zip']
}
}
},
data(){
return {
filename: null, // 文件名字
filepercent: 0, // 上传进度
uploadmodal: false, // 上传弹窗
fileurl:'',
loadflag: false,
previousrequest: null
}
},
mounted(){
},
methods:{
// 上传之前
beforeupload(file) {
// console.log("上传之前")
this.loadflag = true;
this.fileajaxupload(file);
return false;
},
// 关闭上传弹窗/取消上传
closeupmodal() {
this.$message.info('取消上传');
if (this.previousrequest) {
this.previousrequest.abort();
}
this.uploadmodal = false;
},
// 上传文件请求
fileajaxupload(file) {
let self = this;
this.filename = file.name;
// 验证上传的文件类型
let index1 = file.name.lastindexof(".");
let index2 = file.name.length;
let filesuffix = file.name.substring(index1+1, index2).tolowercase();
if (this.fileformat.indexof(filesuffix) == -1) { // 类型不符合
this.loadflag = false;
this.$message.error("文件格式不正确,请上传zip格式文件");
return false;
}
let fd = new formdata(); // 声明formdata()
fd.append('file', file);
this.$http({
url: self.uploadurl,
method:'post',
body: fd,
before(request) {
self.previousrequest = request;
},
progress: function(progressevent) { // 上传进度事件
self.loadflag = false;
if(progressevent.lengthcomputable){
// 属性lengthcomputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量
// 如果lengthcomputable为false，就获取不到progressevent.total和progressevent.loaded
self.uploadmodal = true;
let _percent = number((progressevent.loaded / progressevent.total * 100).tofixed(2));
self.filepercent = _percent < 100 ? _percent : 99;
}
}
}).then((response) =>{
// 上传成功
let resp = response.data;
if (resp.status === 200) {
self.filepercent = 100;
self.fileurl = resp.data;
self.$emit('oncomplete', resp.data);
self.$message.success('上传成功');
} else {
if (resp.status !== 401) {
self.$message.error(resp.desc);
}
}
this.uploadmodal = false;
}).catch(error =>{
self.loadflag = false;
self.uploadmodal = false;
if (self.previousrequest) {
self.previousrequest.abort();
}
})
}
}
}
</script>
父组件调用：
<m-upload @oncomplete="oncomplete">
<div class="offline-war">
<div class="offline-war-title">{{ fileurl ? '重新上传' : '上传压缩包' }}</div>
</div>
</m-upload>
<script>
import mupload from '@/components/mupload/mupload.vue';
export default {
data() {
return {
fileurl: ''
}
},
components: {
mupload: mupload
},
methods: {
oncomplete(fileurl) {
this.fileurl = fileurl;
}
}
}
</script>
如对本文有疑问， 点击进行留言回复！！
vuejs （2）- Vue 生命周期 和 VueJS ajax
vue axios blob下载文件，文件下载失败将blob的错误信息转换成json格式
网友评论