uniapp上传图片

1,005 阅读1分钟
<view class="uimg"  v-if="tag == 1">
    <view class="uli" @click="chooseImage">
	<image src="http://img.com/l_a10.png" mode="aspectFill"></image>
    </view>
    <view class="uli" v-for="item in urls">
	<image mode="aspectFill" :src="item"></image>
    </view>
</view>

接下来看js部分

data() {
    urls: [],
    imgList: [],
},
methods: {
// 上传图片
    chooseImage() {
	var that = this
	uni.chooseImage({
	    count: 9,           // 最多可以选择的图片张数,默认9
	    sizeType: ['original', 'compressed'],              //original 原图,compressed 压缩图,默认二者都有
	    sourceType: ['album', 'camera'],             //album 从相册选图,camera 使用相机,默认二者都有。如需直接开相机或直接选相册,请只使用一个选项
	    success: function (res) {
	        const tempFilePaths = res.tempFilePaths;
	        that.urls = tempFilePaths
	        let arr = []
	        for(let i in tempFilePaths) {
	            const uploadTask = uni.uploadFile({
	                url : 'https://mp.puliuwang.com/api/uploadImage',
	                filePath: tempFilePaths[i],
	                name: 'img', //后台的key
                        success: function (uploadFileRes) {
	                    arr.push(JSON.parse(uploadFileRes.data).url)
	                },
		        fail(err) {
		            console.log('err' + err)
		        }
	            });
	        }
	        that.imgList = arr
	    }
	});
    },
}