This article uses the upload component of uView2 to upload from the mobile phone album, and can also upload photos. This component can upload pictures on Mini Program, h5, and App side, which is easy to use.
1. Front-end code
<template>
<view class="u-page">
<view class="u-demo-block">
<view class="u-demo-block__content">
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
<u--form
labelPosition="left"
:model="form"
ref="form1"
>
<u-form-item
label="上传照片"
prop="form.problemPhotos"
borderBottom
labelWidth="80"
ref="item3"
>
<u-upload
:fileList="fileList1"
:previewFullImage="true"
@afterRead="afterRead"
@delete="deletePic"
name="1"
multiple
:maxCount="10"
></u-upload>
</u-form-item>
</u--form>
<u-button
type="primary"
text="提交"
customStyle="margin-top: 50px"
@click="submit"
></u-button>
</view>
</view>
</view>
</template>2. Read photos or upload photos
This article has been modified on the basis of the upload upload component of uview2 Upload upload | uView 2.0 - fully compatible with nvue's uni-app ecological framework - uni-app UI framework
(1) Upload the file, write the url as your own background path, and refer to the writing method of Ruoyi's computer for the header.
uni.uploadFile({
url: '/dev-api/common/upload',
header: {
Authorization: "Bearer " + getToken(),
},
filePath: url,
name: 'file',
(2) Assign the file path /profile/upload/2023/02/27/123_20230227141005A061.jpg to rl of the fileList array object through the return value resolve(JSON.parse(res.data).fileName) of the uploadFilePromise function.
(3) Then convert the array into a string and assign it to this.form.problemPhotos separated by ',' when submitting.
let images = []
this.fileList1.forEach((item) => {
images.push(item.rl)
})
this.form.problemPhotos=images.join(',');
The specific code is as follows:
import { getToken } from "@/utils/auth";
<script>
export default {
data() {
return {
fileList1: [],
}
},
methods: {
// 删除图片
deletePic(event) {
this[`fileList${event.name}`].splice(event.index, 1)
},
// 新增图片
async afterRead(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: '上传中'
})
})
console.log(this.fileList1)
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise(lists[i].url)
let item = this[`fileList${event.name}`][fileListLen]
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
rl: result
}))
fileListLen++
}
console.log(this.fileList1);
//this.problemPhotos=this.fileList1;
},
uploadFilePromise(url) {
let _self=this;
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: '/dev-api/common/upload',
header: {
Authorization: "Bearer " + getToken(),
},
filePath: url,
name: 'file',
success: (res) => {
let result = JSON.parse(res.data)
// console.log(result.fileName);
setTimeout(() => {
resolve(JSON.parse(res.data).fileName)
}, 1000)
}
});
})
},
submit() {
if (this.form.id == null) {
this.form.problemStatus=1;
let images = []
this.fileList1.forEach((item) => {
images.push(item.rl)
})
this.form.problemPhotos=images.join(',');
addProblems(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
});
}
}
},
}
</script>4. Configure the manifest.json as follows, and configure the target for real machine debugging: http://127.0.0.1:8085 . where 8085 is the backend port number.
"h5" : {
"template" : "static/index.html",
"devServer" : {
"port" : 9092,
"https" : false,
"disableHostCheck" : true, //设置跳过host检查
"proxy" : {
"/dev-api" : {
"target" : "http://127.0.0.1:8085", //目标接口域名
"changeOrigin" : true, //是否跨域
"secure" : false, // 设置支持https协议的代理
"pathRewrite" : {
"^/dev-api" : ""
}
},
"/prod-api" : {
"target" : "http://127.0.0.1:8085", //目标接口域名
"changeOrigin" : true, //是否跨域
"secure" : false, // 设置支持https协议的代理
"pathRewrite" : {
"^/prod-api" : ""
}
}
}
},5. Using the real-device debugging of the WeChat tool, you can select "photograph" or "select from mobile phone album" in the form of a small program on the mobile phone.
6. The effect of using h5 in the browser is as follows
