
文件上传(图片)是非常常用的一个组件,element-ui中的这个upload如何使用呢?示例如下:
具体描述请参考在线文档:http://element-cn.eleme.io/#/zh-CN/component/upload
页面部分:
<el-upload
class="upload-demo"
drag
action="//www.offeu.com/upfile"
name="fname"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:on-change="handleChange"
list-type="picture">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div slot="tip" class="el-upload__tip">(若上传图片不成功,请使用谷歌浏览器)</div>
</el-upload>
脚本部分:
methods: {
handleChange: function (file, fileList) { // 演示维护fileList列表
if (file.response !== undefined) {
// 远程地址:'https://www.offeu.com' + file.response.ObjectFileName
// 缓存地址:URL.createObjectURL(file.raw);
let jd = JSON.parse('{"name":"' + file.name +
'","status":"success","uid":' + file.uid +
',"url":"https://www.offeu.com' + file.response.ObjectFileName + '"}')
this.fileList.push(jd)
console.log(JSON.stringify(this.fileList))
}
},
handleRemove: function (file, fileList) { // 删除图片时的处理
console.log(file, fileList)
},
handlePreview: function (file) { // 预览图片时的处理
console.log(file, this.fileList)
}
还需要在data里放一个fileList的json对象,如:
fileList: [{name: '152880729664.jpg', url: 'https://www.offeu.com/up/20181009/152880729664.jpg'}]
以上代码是针对本站的 https://www.offeu.com/upfile 文件上传接口实现的文件上传效果,同时对上传的文件进行预览。