定制开发uView图片上传

uView1.X定制开发的上传图片

基本使用

更详细的可见uView组件

<!-- Example --><template>	<view>		<u-alert-tips :show="show" :title="title" :description="description" @close="show = false"				:close-able="true"></u-alert-tips>		<u-upload ref="uUpload" :action="action" :auto-upload="true" :file-list="listImg" @on-remove="onRemove"				@on-success="onSuccess" :max-size="2 * 1024 * 1024" max-count="9" width="300" height="300"				:multiple="false" :limitType="limitType"></u-upload>		<div class="btn">			<u-button @click="preserve" type="primary" size="medium" :ripple="true" ripple-bg-color="#909399">保存</u-button>			<u-button @click="clear" type="info" size="medium" :ripple="true" ripple-bg-color="#909399">重置</u-button>		</div>	</view></template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

初始化数据

// 注: 均为模拟数据data() {	return {		title: '提示', // u-alert-tips 显示的标题		description: '该展示图将会放在工厂详情页中进行轮播展示，建议您放上和公司有关的照片，如：工厂宣传图、工厂环境、产品宣传图等', // u-alert-tips 的描述		show: true, // 监听 u-alert-tips 的 close 事件		action: this.$store.state.apiUrlV1 + 'api/v1/pictures', // 后端服务器地址(例: https://www.vcg.com)		listImg: [], // 显示的图片列表，数组元素为对象，必须提供url属性		filesArr: [], // 上传的图片列表(图片选择或者上传成功后，会保存在组件内部的lists数组中，数组元素为对象)		limitType: ['png', 'jpg', 'jpeg'], // 允许的图片后缀	}},
1
2
3
4
5
6
7
8
9
10
11
12

获取上传的图片列表

图片选择或者上传成功后，会保存在组件内部的lists中，数组元素为对象，有如下属性

url: 图片地址error：组件内部使用，不应根据此值判断上传是否成功，而应根据progress属性progress：如果值为100，表示图片上传成功response：上传成功后，服务器返回的数据，这是最有用的了
1
2
3
4

为了获得上传的文件列表，可以在提交表单时，通过ref获取组件内部的lists文件数组，历遍元素筛选出progress为100的文件

方法

methods: {	// 获取初始化数据(可能存在展示数据的情况)	async initData() {		const res = await details.factoryDetailEdit(); // details.factoryDetailEdit()---请求数据的方法		console.log(res.data.data.factoryEditor.carousel); // 打印请求到的数据		let imgUrl = JSON.parse(res.data.data.factoryEditor.carousel); // 赋值		console.log(11111, imgUrl); // 随便加点东西,便于区分		imgUrl.forEach((element) => {			let imgUrl = {				url: element			}; // arr.forEach(callBack)遍历数组,无return,即使有return,也不会返回任何值		this.listImg.push(imgUrl); // 将上传的图片push到需要展示的数组中		})		console.log(this.listImg); // 打印图片列表	},	// 重置上传的图片列表	clear() {		console.log('重置成功');		this.listImg = [];		this.initData();		this.$router.go(0); // 刷新当前页面	},	// 点击删除选择的图片	onRemove(index) {		console.log('图片已被移除', index);		this.listImg.splice(index, 1); // arr.splice(i,n) 删除从i(索引值)开始之后的那个元素。返回值是删除的元素	},	// 图片自动上传成功的钩子	onSuccess(data) {		let files = [];		// 通过filter（过滤数组），筛选出上传进度为100的文件		files = this.$refs.uUpload.lists.filter(val => {			return val.progress == 100;		})		// 如果不需要进行太多的处理，直接如下即可		files = this.$refs.uUpload.lists;		console.log(files);		this.filesArr.push({			url: data.data.url		});	},	// 点击保存，将图片上传到华为云	async preserve() {		let arr = this.listImg.concat(this.filesArr) // arr.concat() 连接两个数组 返回值为连接后的新数组		let params = {			carousel: arr		}		let order = await details.factoryDetailEditPreserve(params);	}}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50