1.1.3.1 需求
上传图片界面如下图：
点击“加号”上传图片，图片上传成功自动显示；点击“删除”将删除图片。 1.1.3.2 页面
使用Element-UI的Upload上传组件实现上边的效果。
1) template
[AppleScript] 纯文本查看 复制代码 <el‐upload
action="/filesystem/upload"
list‐type="picture‐card"
:before‐upload="setbusinesskey"
:on‐success="handleSuccess"
:file‐list="fileList"
:limit="picmax"
:on‐exceed="rejectupload"
:data="uploadval">
<i class="el‐icon‐plus"></i> </el‐upload>
el-upload参数说明：
action：必选参数，上传的地址 list-type：文件列表的类型（text/picture/picture-card） before-upload：上传前执行钩子方法 ，function(file)
on-success：上传成功 执行的钩子方法 ，function(response, file, fileList) on-error：上传失败的钩子方法，function(err, file, fileList)
on-remove：文件删除的钩子方法，function(file, fileList) file-list：文件列表，此列表为上传成功 的文件 limit：最大允许上传个数
on-exceed：文件超出个数限制时的钩子，方法为：function(files, fileList) data：提交上传的额外参数，需要封装为json对象，最终提交给服务端为key/value串
2)数据模型
[AppleScript] 纯文本查看 复制代码
<el‐upload action="/filesystem/upload"
list‐type="picture‐card"
:before‐upload="setbusinesskey"
:on‐success="handleSuccess"
:file‐list="fileList" :limit="picmax"
:on‐exceed="rejectupload"
:data="uploadval">
<i class="el‐icon‐plus"></i> </el‐upload>
<script> import * as sysConfig from '@/../config/sysConfig';
import * as courseApi from '../../api/course';
import utilApi from '../../../../common/utils';
import * as systemApi from '../../../../base/api/system';
export default {
data() {
return {
picmax:1,
courseid:'',
dialogImageUrl: '',
dialogVisible: false,
fileList:[],
uploadval:{filetag:"course"},
imgUrl:sysConfig.imgUrl
}
},
methods: {
//超出文件上传个数提示信息
rejectupload(){
this.$message.error("最多上传"+this.picmax+"个图片");
},
//在上传前设置上传请求的数据
setuploaddata(){
},
//删除图片
handleRemove(file, fileList) {
console.log(file)
alert('删除')
},
//上传成功的钩子方法
handleSuccess(response, file, fileList){
console.log(response)
alert('上传成功')
},
//上传失败执行的钩子方法
handleError(err, file, fileList){
this.$message.error('上传失败');
//清空文件队列
this.fileList = []
}
},
mounted(){
//课程id
this.courseid = this.$route.params.courseid;
} } </script>
1.1.3.3 测试
1、点击“加号”测试上传图片。
| 
收藏
淘帖
踩
