基于vue的移动端图片上传

FE-Dong

于 2018-09-27 10:34:42 发布

阅读量9.7k

点赞数 1

分类专栏： vue javascript

本文链接：https://blog.youkuaiyun.com/Dong8508/article/details/82863183

版权

本文介绍了如何在Vue移动端应用中实现图片上传功能，包括上传效果的设计（如添加、删除图片），HTML结构，以及使用mint-ui提示和less预处理器的组件updatefile.vue的代码实现。同时，还讲解了如何获取组件上传的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、上传效果（含添加和删除设计图）：

达到上传上限，隐藏上传图标，删除后，数量小于上限会自动显示。

2、html代码

//使用前，要在JS中先把组件引入并挂载

import updatefile from "../common/uploadfile";

components: { updatefile },

//使用
<updatefile :multiple="true" :max=6 :list="imgList" ref="upload"></updatefile>

//multiple:是否支持多选
//max:最多上传几张
//list:编辑反显使用

4、组件updatefile.vue代码(使用了mint-ui提示和less预处理器)