上节课我们写好了后端的Java代码，可以调用工作流项目执行归档任务。这节课我们来完成前端的JS代码，咱们把文件上传和删除给做了，下节课再去写执行归档的JS代码。
一、熟悉前端页面
归档任务对应的弹窗页面是archive.vue，我们先来熟悉一下这个页面。
<el-dialog title="执行归档" width="500px" :close-on-click-modal="false" v-model="visible" :show-close="false">
<el-upload
ref="upload"
:action="url"
list-type="picture-card"
accept=".jpg,.jpeg,.png"
with-credentials="true"
:before-upload="beforeUploadHandle"
:on-success="successHandle"
:on-remove="removeHandle"
>
<i class="el-icon-plus"></i>
</el-upload>
<template #footer>
<span class="dialog-footer">
<el-button size="medium" @click="cancel()">取消</el-button>
<el-button type="primary" @click="archive()" size="medium" :disabled="disableBtn">{{ btn }}</el-button>
</span>
</template>
</el-dialog>
页面模型层的代码也不复杂。由于请求既要上传文件，又要上传普通数据，容易产生干扰。所以我把type参数放在URL传递，请求体中只有上传的文件。
data: function() {
return {
visible: false,
url: this.$baseUrl + 'cos/uploadCosFile?type=archive&token='+localStorage.getItem("token"),
taskId: '',
picList: {},
disableBtn: false,
btn: '确定'
};
},
一、初始化页面
因为每次归档的时候，用的是同一个弹窗页面，所以弹窗页面的内容需要清理，不能带有上次归档上传的照片。
init: function(taskId) {
let that = this;
that.visible = true;
that.taskId = taskId;
that.btn = '执行归档';
that.disableBtn = false;
that.$nextTick(() => {
that.$refs['upload'].clearFiles();
});
},
二、上传文件
在归档弹窗页面中，我给上传控件设置了很多属性。其中:before-upload属性是上传文件之前运行的回调函数。我们要判断用户上传的文件是否符合要求，这里只接受jpg和png格式的图片，而且文件体积不能超过2M（application.yml文件设置的）。
<el-upload
ref="upload"
:action="url"
list-type="picture-card"
accept=".jpg,.jpeg,.png"
with-credentials="true"
:before-upload="beforeUploadHandle"
:on-success="successHandle"
:on-remove="removeHandle"
>
<i class="el-icon-plus"></i>
</el-upload>
beforeUploadHandle: function(file) {
if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png') {
this.$message.error('只支持jpg、png格式的图片！');
return false;
}
return true;
},
至于说上传文件，这个Ajax请求不需要我们写，:action属性规定了上传URL路径。<el-upload>控件会自动向Web方法上传文件。
文件上传成功之后，触发了:on-success属性对应的回调函数，所以我们要声明这个函数。把成功存储在腾讯云的文件的URL路径保存在模型层的变量上面。
successHandle: function(resp, file, fileList) {
if (resp && resp.code === 200) {
for (let one of fileList) {
this.picList[one.response.url] = one.response.path;
}
} else {
this.$message.error('图片上传失败');
}
},
三、删除上传文件
如果上传文件的时候，用户选错了文件，那么用户可以删除已经上传到云存储里面的文件，然后重新上传文件。当用户删除<el-upload>控件中的某个文件，会触发:on-remove属性对应的回调函数，所以我们要把这个函数给实现了。
removeHandle: function(file, fileList) {
let that = this;
let url = file.response.url;
let path = this.picList[url];
that.$http('cos/deleteCosFile', 'POST', { pathes: [path] }, true, function(resp) {
delete that.picList[url];
});
},
当用户上传了文件，但是最终没有点击“执行归档”按钮，而是点击了“取消”按钮。那么你说云存储上面还有必要保存用户刚上传的文件吗？当然没有必要，所以我们要删除这些文件。
<el-button size="medium" @click="cancel()">取消</el-button>
cancel: function() {
let that = this;
if (Object.keys(that.picList).length > 0) {
let pathes = Object.values(that.picList);
that.$http('cos/deleteCosFile', 'POST', { pathes: pathes }, true, function(resp) {
that.picList = {};
});
}
that.visible = false;
that.$refs['upload'].clearFiles();
},
四、显示弹窗页面
在approval.vue页面中，引用了archive.vue弹窗页面。我们要实现归档按钮点击事件的回调函数。
<el-button
type="text"
size="medium"
v-if="isAuth(['ROOT', 'FILE:ARCHIVE']) && scope.row.filing"
@click="archive(scope.row.taskId)"
>
归档
</el-button>
archive: function(taskId) {
this.archiveVisible = true;
this.$nextTick(() => {
this.$refs.archive.init(taskId);
});
},