<template>
<view class="u-page">
<u-button
type="primary"
text="提交"
customStyle="margin-top: 50px"
@click="submit"
></u-button>
<u-button
type="primary"
text="提交"
customStyle="margin-top: 50px"
@click="xusc"
></u-button>
<view class="u-demo-block">
<text class="u-demo-block__title">基础用法</text>
<view class="u-demo-block__content">
<view class="u-page__upload-item">
<u-upload
:fileList="fileList1"
@afterRead="xscz"
@delete="deletePic"
name="1"
multiple
:maxCount="10"
></u-upload>
</view>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">文件预览</text>
<view class="u-demo-block__content">
<view class="u-page__upload-item">
<u-upload
:fileList="fileList3"
@afterRead="afterRead"
@delete="deletePic"
name="3"
multiple
:maxCount="10"
:previewFullImage="true"
></u-upload>
</view>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">隐藏上传按钮</text>
<view class="u-demo-block__content">
<view class="u-page__upload-item">
<u-upload
:fileList="fileList4"
@afterRead="afterRead"
@delete="deletePic"
name="4"
multiple
:maxCount="2"
></u-upload>
</view>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">限制上传数量</text>
<view class="u-demo-block__content">
<view class="u-page__upload-item">
<u-upload
:fileList="fileList5"
@afterRead="afterRead"
@delete="deletePic"
name="5"
multiple
:maxCount="3"
></u-upload>
</view>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">自定义上传样式</text>
<view class="u-demo-block__content">
<view class="u-page__upload-item">
<u-upload
:fileList="fileList6"
@afterRead="afterRead"
@delete="deletePic"
name="6"
multiple
:maxCount="1"
width="250"
height="150"
>
<image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" mode="widthFix" style="width: 250px;height: 150px;"></image>
</u-upload>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
fileList1: [],
fileList2: [],
fileList3: [{
url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
}],
fileList4: [{
url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
},
{
url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
},
{
url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
},
{
url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
}
],
fileList5: [],
fileList6: [],
fileList7: ['qqqqq','wwww','eeee','rrrrrr','ttttttt']
}
},
onLoad() {
console.log(this.fileList7)
},
methods: {
// 删除图片
deletePic(event) {
console.log(event)
let xindex = event.index;
//splice根据数组序号属性删除元素
this.fileList7.splice(xindex,1);
//删除前端显示
this[`fileList${event.name}`].splice(event.index, 1)
console.log(this.fileList7)
},
// 新增图片
async xscz(event){
console.log(event)
// 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式
let lists = [].concat(event.file)
let fileListLen = this[`fileList${event.name}`].length
lists.map((item) => {
this[`fileList${event.name}`].push({
...item,
status: 'uploading',
message: '上传中'
})
})
for (let i = 0; i < lists.length; i++) {
//异步调用上传图片到unicloud云存储上
const result = await this.uploadFilePromisex(lists[i].url)
let item = this[`fileList${event.name}`][fileListLen]
//前端上传成功样式判断
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: result
}))
fileListLen++
}
},
uploadFilePromisex(url){
let that = this;
// 上传至 unicloud云储存
vk.uploadFile({
title:"上传中...",
filePath: url,
suffix:"png", // 不传suffix会自动获取,但H5环境下获取不到后缀,但可以通过file.name 获取
provider:"unicloud",
success(res) {
// 上传成功
// console.log(res.url)
//push在数组后新增元素
that.fileList7.push(res.url);
}
});
},
submit(){
let that = this;
// let a = 'aaaa';
// // that.fileList7 = a;
// that.fileList7.push("Kiwi");
// let b = 'bbbbbbb';
// // that.fileList7.[] += b;
// that.fileList7.push(b);
console.log(this.fileList7)
// console.log(this.fileList7[0])
},
xusc(){
let that = this;
// let arrList = [1,3,5,'aaaa',{a:1}];
let arr = 0;
// that.fileList7.splice(that.fileList7.indexOf(arr),1)
// that.fileList7.pull("Kiwi");
that.fileList7.splice(arr,1)
console.log(that.fileList7)
}
},
}
</script>
<style lang="scss">
.u-page {
&__upload-item{
margin-top:5px;
}
}
</style>
vk和uview表单图片上传
最新推荐文章于 2024-05-13 22:57:56 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)