目录
可以直接按照官网给的例子来，需要注意的就是额外携带参数的话要如何配置，我这里的
upFileData，和
headers是直接写在data里边的 headers 是在 onload 中获取了localStorage的token
一、携带额外参数
:form-data="upFileData" :header="headers"
<u-modal v-model="upFile" title="" :async-close="false" :mask-close-able="true" :show-confirm-button="false">
<!-- 上传 -->
<u-upload style="margin: 0 0 20px 20px;" :action="action" :fileList="fileListfile" @afterRead="afterRead"
:form-data="upFileData" :header="headers" @delete="deletePic" @on-success="success" name="file" multiple
:maxCount="10">
</u-upload>
</u-modal>
二、预览图片
<!-- 预览的弹窗 -->
<u-modal v-model="lookFile" title="" :async-close="false" :mask-close-able="true" :show-confirm-button="false">
<view class="fileBox">
<u-image class="fileBoxImg" v-for="ite in prewList" :showLoading="true" :src="getFullUrl(ite.id)"
width="80px" height="80px" @click="lookPhoto(ite.id)"></u-image>
</view>
</u-modal>
主要是使用 uni.previewImage
lookPhoto(id) {
//预览图片
var urlList = []
let url = 'http://cczs.xxxx.com/ccbg/sys/cloud/file/xxxx?id=' + id //可以直接查看图片的地址
urlList.push(url) //push中的参数为 :src="" 中的图片地址
uni.previewImage({
urls: urlList
})
},
三、提示填写请求路径
:action="http://cczs.xxxx.com/ccbg/sys/cloud/file/upload"
uview官网 ：https://www.uviewui.com/components/upload.html
