vue element-ui 上传文件组件怎么使用
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue element-ui 上传文件组件怎么使用相关的知识，希望对你有一定的参考价值。
参考技术A <el-uploadclass="upload-demo"
action="//jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<script>
export default
data()
return
fileList: [name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100', name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100']
;
,
methods:
handleRemove(file, fileList)
console.log(file, fileList);
,
handlePreview(file)
console.log(file);
</script>本回答被提问者采纳 参考技术B <el-upload
class="upload-demo"
action="//jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<script>
export default
data()
return
fileList: [name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100', name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100']
;
,
methods:
handleRemove(file, fileList)
console.log(file, fileList);
,
handlePreview(file)
console.log(file);
</script>
以上是关于vue element-ui 上传文件组件怎么使用的主要内容，如果未能解决你的问题，请参考以下文章
Vue 之 element-ui upload组件的文件类型