225 lines
7.0 KiB
Vue
225 lines
7.0 KiB
Vue
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 1 4 07254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||
<template>
|
||
<view class="fui-wrap">
|
||
<view class="fui-page__hd">
|
||
<view class="fui-page__title fui-align__center" @tap="vip">Upload <image
|
||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||
</view>
|
||
<view class="fui-page__desc">Upload 图片上传，用于选择或拍照进行上传图片。</view>
|
||
</view>
|
||
<view class="fui-page__bd fui-page__spacing">
|
||
<view class="fui-section__title">自动上传</view>
|
||
<fui-upload :max="5" immediate :url="url" ref="upload" @success="success" @error="error"
|
||
@complete="complete" @preview="preview">
|
||
</fui-upload>
|
||
<view class="fui-section__title">手动上传/自定义加号图标/背景/圆角</view>
|
||
<view class="fui-btn__box">
|
||
<fui-button type="gray" btn-size="medium" text="开始上传" bold @click="startUpload">
|
||
</fui-button>
|
||
</view>
|
||
<fui-upload background="#333" radius="20" :fileList="fileList" :url="url" ref="upload2" @success="success2"
|
||
@error="error2" @complete="complete2" @preview="preview">
|
||
<fui-icon name="plussign" color="#d1d1d1"></fui-icon>
|
||
</fui-upload>
|
||
<view class="fui-section__title">传入文件上传函数，返回一个promise</view>
|
||
|
||
<fui-upload :max="3" call-upload border-color="#FFB703" border-sytle="dashed" ref="uploader"
|
||
@reupload="reUpload" @complete="complete3" @preview="preview">
|
||
</fui-upload>
|
||
<view class="fui-btn__box">
|
||
<fui-button :margin="['48rpx','0']" type="gray" btn-size="medium" text="调用upload方法上传" bold
|
||
@click="callUpload">
|
||
</fui-button>
|
||
</view>
|
||
</view>
|
||
<!--previewImage：百度小程序只支持预览网络路径图片，这里为了做兼容-->
|
||
<!-- #ifdef MP-BAIDU -->
|
||
<fui-gallery :show="show" :current="current" :urls="preUrls" @hide="hideGallery"></fui-gallery>
|
||
<!-- #endif -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
// #ifdef MP-BAIDU
|
||
//预览图片列表
|
||
preUrls: [],
|
||
show: false,
|
||
current: 0,
|
||
// #endif
|
||
//上传接口地址
|
||
url: 'https://ffa.firstui.cn/api/example/upload-file',
|
||
//上传状态，用于保存或其他操作时做判断
|
||
status: '',
|
||
//上传的图片地址列表
|
||
urls: [],
|
||
//上传状态，用于保存或其他操作时做判断
|
||
status2: '',
|
||
//初始化已上传的图片列表
|
||
fileList: ['https://res.firstui.cn/static/images/common/logo.png'],
|
||
//上传的图片地址列表
|
||
urls2: [],
|
||
//调用upload 方法上传
|
||
status3: '',
|
||
urls3: []
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.urls2 = this.fileList
|
||
},
|
||
methods: {
|
||
vip() {
|
||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||
},
|
||
success(e) {
|
||
console.log(e)
|
||
//上传成功回调，处理服务器返回数据【此处根据实际返回数据进行处理】
|
||
let res = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}")
|
||
this.status = e.status
|
||
if (res.data.url) {
|
||
//处理结果返回给组件
|
||
//data.url为上传成功后返回的图片地址
|
||
//e.index为图片索引值
|
||
this.$refs.upload.result(res.data.url, e.index)
|
||
}
|
||
},
|
||
error(e) {
|
||
this.status = e.status
|
||
},
|
||
complete(e) {
|
||
this.status = e.status
|
||
this.urls = e.urls
|
||
if (this.status === 'success' && e.action === 'upload') {
|
||
this.fui.toast('上传完成！')
|
||
//已上传完成的图片列表 this.urls
|
||
console.log(this.urls)
|
||
}
|
||
},
|
||
preview(e) {
|
||
// #ifdef MP-BAIDU
|
||
this.preUrls = e.urls;
|
||
this.current = e.index;
|
||
setTimeout(() => {
|
||
this.show = true;
|
||
}, 50)
|
||
// #endif
|
||
},
|
||
hideGallery() {
|
||
this.show = false;
|
||
},
|
||
success2(e) {
|
||
console.log(e)
|
||
//上传成功回调，处理服务器返回数据【此处根据实际返回数据进行处理】
|
||
let res = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}")
|
||
this.status = e.status
|
||
if (res.data.url) {
|
||
//处理结果返回给组件
|
||
//data.url为上传成功后返回的图片地址
|
||
//e.index为图片索引值
|
||
this.$refs.upload2.result(res.data.url, e.index)
|
||
}
|
||
},
|
||
error2(e) {
|
||
this.status2 = e.status
|
||
uni.showModal({
|
||
content: JSON.stringify(e)
|
||
})
|
||
},
|
||
complete2(e) {
|
||
this.status2 = e.status
|
||
this.urls2 = e.urls
|
||
if (this.status2 === 'success' && e.action === 'upload') {
|
||
this.fui.toast('上传完成！')
|
||
//已上传完成的图片列表 this.urls2
|
||
console.log(this.urls2)
|
||
}
|
||
},
|
||
startUpload() {
|
||
if (!this.status2 || this.status2 !== 'preupload') {
|
||
this.fui.toast('请选择需要上传的图片！')
|
||
return
|
||
}
|
||
//开始上传
|
||
this.$refs.upload2.start()
|
||
},
|
||
/*
|
||
以下为调用upload方法手动上传的所有方法内容
|
||
*/
|
||
//调用upload方法上传时传入的回调函数
|
||
uploadFile(file) {
|
||
//上传的文件信息
|
||
console.log('upload file', file)
|
||
// 文件上传的函数，返回一个promise
|
||
//上传成功后返回上传后的图片地址，上传失败则返回false即可
|
||
return new Promise((resolve, reject) => {
|
||
//调用api上传，所有需要参数自行补充
|
||
uni.uploadFile({
|
||
url: this.url,
|
||
name: 'file',
|
||
// header: {},
|
||
// formData:{},
|
||
filePath: file.path,
|
||
success: (res) => {
|
||
//以下成功或失败逻辑根据接口自行处理
|
||
const data = JSON.parse(res.data.replace(/\ufeff/g, "") || "{}")
|
||
if (data.statusCode === 200) {
|
||
//返回上传成功后的图片
|
||
resolve(data.data.url)
|
||
} else {
|
||
//上传失败
|
||
reject(false)
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
//上传失败
|
||
reject(false)
|
||
}
|
||
})
|
||
})
|
||
},
|
||
callUpload() {
|
||
//注意：此方法上传函数需要页面自行实现，如上 uploadFile（当组件内部方法无法满足时使用该方法自行去实现上传）
|
||
if (!this.status3 || this.status3 !== 'preupload') {
|
||
this.fui.toast('请选择需要上传的图片！')
|
||
return
|
||
}
|
||
//调用upload 方法上传，并传入函数，此时请勿传入index值
|
||
this.$refs.uploader.upload(this.uploadFile)
|
||
},
|
||
//重新上传
|
||
reUpload(e) {
|
||
/*
|
||
callUpload 中上传失败时会出现重新上传按钮
|
||
点击重新上传按钮触发（仅call-upload 为true 时有效）
|
||
*/
|
||
//当前上传按钮索引值
|
||
console.log(e.index)
|
||
//调用upload 方法上传，并传入函数，且此时需要传入index值
|
||
this.$refs.uploader.upload(this.uploadFile, e.index)
|
||
},
|
||
complete3(e) {
|
||
console.log(e)
|
||
this.status3 = e.status
|
||
this.urls3 = e.urls
|
||
if (this.status3 === 'success' && e.action === 'upload') {
|
||
this.fui.toast('上传完成！')
|
||
//已上传完成的图片列表 this.urls3
|
||
// console.log(this.urls3)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.fui-btn__box {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
padding-bottom: 64rpx;
|
||
}
|
||
</style> |