Browse Source

上传图片

master
zhang_li 9 months ago
parent
commit
36ee99106e
  1. 2
      config.js
  2. 93
      pages/deviceReport/addForm.vue
  3. 5
      utils/upload.js

2
config.js

@ -1,7 +1,7 @@
// 应用全局配置 // 应用全局配置
module.exports = { module.exports = {
// http://192.168.0.165:1208 // http://192.168.0.165:1208
baseUrl: process.env.NODE_ENV === 'development' ? 'http://192.168.0.165:12080' : 'http://dev.ccwin-in.com:25200/api', baseUrl: process.env.NODE_ENV === 'development' ? 'http://192.168.1.18:12080' : 'http://dev.ccwin-in.com:25200/api',
baseApi:process.env.NODE_ENV === 'development' ? '/admin-api' : '/api/admin-api', baseApi:process.env.NODE_ENV === 'development' ? '/admin-api' : '/api/admin-api',
// 应用信息 // 应用信息
appInfo: { appInfo: {

93
pages/deviceReport/addForm.vue

@ -29,6 +29,18 @@
<u-icon name="arrow-right" color="#aaaaaa" size="28"></u-icon> <u-icon name="arrow-right" color="#aaaaaa" size="28"></u-icon>
</view> </view>
</u-form-item> </u-form-item>
<view class="image">
<view class="image-list" v-if='imgList.length>0'>
<view class="image-item" v-for="(item,index) in imgList" :key="index">
<image :src="item" mode=""></image>
<u-icon name="close-circle-fill" color="red" class="close" size="36" @click="delImage(index)">
</u-icon>
</view>
</view>
<view class="image-item image-item1" @click="chooseImage" v-if='imgList.length<3'>
<image src="../../static/images/photo.png" mode=""></image>
</view>
</view>
</u-form> </u-form>
<view class="footer"> <view class="footer">
<view class="btns"> <view class="btns">
@ -46,6 +58,8 @@
import * as deviceApi from "@/api/device.js" import * as deviceApi from "@/api/device.js"
import * as moldApi from "@/api/mold.js" import * as moldApi from "@/api/mold.js"
import * as dictApi from "@/api/dict.js" import * as dictApi from "@/api/dict.js"
import * as uploadApi from "@/api/upload.js"
export default { export default {
data() { data() {
return { return {
@ -63,6 +77,7 @@
singleColumnShow: false, singleColumnShow: false,
singleColumnDefaultValue: [], singleColumnDefaultValue: [],
singleColumnList: [], singleColumnList: [],
imgList: []
} }
}, },
methods: { methods: {
@ -181,7 +196,34 @@
this.$emit('singleColumn', this.field, this.form[this.field]) this.$emit('singleColumn', this.field, this.form[this.field])
this.$forceUpdate() this.$forceUpdate()
}, },
chooseImage() {
uni.chooseImage({
count: 1, // 9
sizeType: ['compressed'], //
sourceType: ['album', 'camera'], //
success: (res) => {
let filePath = res.tempFilePaths[0]
this.$modal.loading()
uploadApi.uploadFile({
filePath: filePath,
name: 'file',
formData: {
'user': 'test'
},
}).then(ret => {
this.$modal.closeLoading()
this.imgList.push(ret.data)
console.log(ret)
}).catch((err) => {
this.$modal.closeLoading()
});
},
});
},
//
delImage(index) {
this.imgList.splice(index, 1)
}
}, },
async onLoad(option) { async onLoad(option) {
if (option.type) this.type = option.type; if (option.type) this.type = option.type;
@ -239,6 +281,7 @@
} }
} }
} }
.select { .select {
display: flex; display: flex;
align-items: center; align-items: center;
@ -258,6 +301,7 @@
} }
} }
.footer { .footer {
position: fixed; position: fixed;
bottom: 0px; bottom: 0px;
@ -302,4 +346,51 @@
text-align: center; text-align: center;
font-size: 28rpx; font-size: 28rpx;
} }
.image {
padding: 0px 30rpx;
padding-bottom: 30rpx;
display: flex;
align-items: center;
flex-wrap: wrap;
.image-list {
display: flex;
align-items: center;
flex-wrap: wrap;
}
}
.image-item {
width: 210rpx;
height: 210rpx;
margin-right: 20rpx;
position: relative;
border: 1px solid rgba(230, 230, 230, 0.5);
margin-bottom: 20rpx;
border-radius: 20rpx;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
.close {
position: absolute;
right: 0px;
top: 0px;
}
}
.image-item1 {
border: none;
margin-right: 0px;
image {
width: 100%;
height: 100%;
}
}
</style> </style>

5
utils/upload.js

@ -3,11 +3,12 @@ import config from '@/config'
import { getAccessToken } from '@/utils/auth' import { getAccessToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode' import errorCode from '@/utils/errorCode'
import { toast, showConfirm, tansParams } from '@/utils/common' import { toast, showConfirm, tansParams } from '@/utils/common'
let timeout = 10000 let timeout = 10000
const baseUrl = config.baseUrl const baseUrl = config.baseUrl
const baseApi = config.baseApi
const upload = config => { const upload = config => {
console.log(config)
// 是否需要设置 token // 是否需要设置 token
const isToken = (config.headers || {}).isToken === false const isToken = (config.headers || {}).isToken === false
config.header = config.header || {} config.header = config.header || {}
@ -25,7 +26,7 @@ const upload = config => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
uni.uploadFile({ uni.uploadFile({
timeout: config.timeout || timeout, timeout: config.timeout || timeout,
url: baseUrl + config.url, url: baseUrl +baseApi+ config.url,
filePath: config.filePath, filePath: config.filePath,
name: config.name || 'file', name: config.name || 'file',
header: config.header, header: config.header,

Loading…
Cancel
Save