Browse Source

上传图片

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

2
config.js

@ -1,7 +1,7 @@
// 应用全局配置
module.exports = {
// 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',
// 应用信息
appInfo: {

99
pages/deviceReport/addForm.vue

@ -29,6 +29,18 @@
<u-icon name="arrow-right" color="#aaaaaa" size="28"></u-icon>
</view>
</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>
<view class="footer">
<view class="btns">
@ -46,23 +58,26 @@
import * as deviceApi from "@/api/device.js"
import * as moldApi from "@/api/mold.js"
import * as dictApi from "@/api/dict.js"
import * as uploadApi from "@/api/upload.js"
export default {
data() {
return {
loading: false,
type: "",
appDeviceMoldType:[],
appDeviceMoldType: [],
form: {
describes: "",
deviceNumber: '',
deviceName: '',
factoryAreaName: '',
factoryAreaNumber: '',
receiverType:''
receiverType: ''
},
singleColumnShow: false,
singleColumnDefaultValue: [],
singleColumnList: [],
imgList: []
}
},
methods: {
@ -181,7 +196,34 @@
this.$emit('singleColumn', this.field, this.form[this.field])
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) {
if (option.type) this.type = option.type;
@ -239,7 +281,8 @@
}
}
}
.select {
.select {
display: flex;
align-items: center;
height: 72rpx;
@ -258,6 +301,7 @@
}
}
.footer {
position: fixed;
bottom: 0px;
@ -302,4 +346,51 @@
text-align: center;
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>

5
utils/upload.js

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

Loading…
Cancel
Save