uni-app uni.uploadFile 上传图片后台接收不到(后台C#)
参考:https://ask.dcloud.net.cn/article/35547前端代码<template><view class="page"><view class='feedback-title feedback-star-view'><text>项目</text><picker v-i...
·
参考:https://ask.dcloud.net.cn/article/35547
前端代码
<template>
<view class="page">
<view class='feedback-title feedback-star-view'>
<text>项目</text>
<picker v-if="typeArray.length>0" class="feedback-star-view" @change="bindPickerChange" :value="typeIndex" :range="typeArray" range-key="name">
<view class="uni-input">{{typeArray[typeIndex].name}}</view>
</picker>
</view>
<view class="feedback-body">
<textarea placeholder="请详细描述你的问题和意见..." v-model="content" class="feedback-textare" />
</view>
<view class='feedback-title'>
<text>图片(选填,提供问题截图,总大小10M以下)</text>
</view>
<view class="feedback-body feedback-uploader">
<view class="uni-uploader">
<view class="uni-uploader-head">
<view class="uni-uploader-title">点击预览图片</view>
<view class="uni-uploader-info">{{imageList.length}}/9</view>
</view>
<view class="uni-uploader-body">
<view class="uni-uploader__files">
<block v-for="(image,index) in imageList" :key="index">
<view class="uni-uploader__file" style="position: relative;">
<image class="uni-uploader__img" :src="image" @tap="previewImage(index)"></image>
<view class="close-view" @click="closeImage(index)">x</view>
</view>
</block>
<view class="uni-uploader__input-box" v-show="imageList.length < 9">
<view class="uni-uploader__input" @tap="chooseImg"></view>
</view>
</view>
</view>
</view>
</view>
<view ref="input" class="input"></view>
<button type="default" class="feedback-submit" @tap="send">提交</button>
</view>
</template>
<script>
import {mapState} from 'vuex'
export default {
computed: mapState(['hasLogin', 'uerInfo']),
data() {
return {
typeIndex:0,
typeArray: [],
imageIndex: 0,
imageList: [],
content:"",
}
},
onLoad() {
this.checkLogin();
},
mounted (){
var input = document.createElement('input')
input.style.display = 'none'
input.type = 'file'
input.id = 'file';
var _this = this;
this.$refs.input.$el.appendChild(input);
input.onchange = (event) => {
var file = event.target.files[0];
//上传方法
_this.uploadAPI(file)
}
},
methods: {
bindPickerChange: function(e) {
console.log('picker发送选择改变,携带值为:' + e.target.value)
this.typeIndex=e.target.value;
},
checkLogin:function(){
console.log("hasLogin:"+this.hasLogin)
if (!this.hasLogin) {
uni.showModal({
title: '未登录',
content: '您未登录,需要登录后才能继续',
showCancel: false,
success: (res) => {
if (res.confirm) {
uni.reLaunch({
url: '../login/login'
});
}
}
});
}
},
closeImage(e){
this.imageList.splice(e,1);
},
uploadAPI(file){
let _this=this;
var imgObj={
fileName: file.name,
uri: URL.createObjectURL(file)
}
//path是上面传进来的File对象
uni.uploadFile({
url: _this.SERVER_API+'/Publish/upload',
filePath:URL.createObjectURL(file), //blob格式,或者转base64,结果一样
//files:imgObj,
//filePath:'filePath',
formData:imgObj,
name:'file',
header:{
//"Content-Type": "multipart/form-data",
'token':_this.uerInfo.token,
},
//formData:data, //其它参数
success: (res) => {
console.log(res); //后台返回:获取失败。后台无法获取上传的文件,传的是空
console.log('uploadImage success, res is:', res)
var result=JSON.parse(res.data);
if(res.statusCode==200 && result.state==1){
_this.imageList = _this.imageList.concat(result.data);
console.log(_this.imageList)
}
},
fail: (e) => {
console.log(e);
}
})
},
chooseImg: function() {
return document.getElementById("file").click();
let _this=this;
uni.chooseImage({
count: 9- this.imageList.length,
sizeType: ["camera", "album"],
sourceType: ['album'],
success: (res) => {
console.log('chooseImage success, temp path is')
console.log( res)
uni.uploadFile({
url: _this.SERVER_API+'/Publish/upload',
header: {
"Content-Type": "multipart/form-data",
'token':_this.uerInfo.token,
},
files: res.tempFilePaths,
filePath: 'imageSrc',
fileType: 'image',
name: 'data',
success: (res) => {
console.log('uploadImage success, res is:', res)
var result=JSON.parse(res.data);
if(res.statusCode==200 && result.state==1){
_this.imageList = _this.imageList.concat(result.data);
console.log(_this.imageList)
}
uni.showToast({
title: '上传成功',
icon: 'success',
duration: 1000
})
},
fail: (err) => {
console.log('uploadImage fail', err);
uni.showModal({
content: err.errMsg,
showCancel: false
});
}
});
},
fail: (err) => {
console.log('chooseImage fail', err)
// #ifdef MP
uni.getSetting({
success: (res) => {
let authStatus = res.authSetting['scope.album'];
if (!authStatus) {
uni.showModal({
title: '授权失败',
content: 'Hello uni-app需要从您的相册获取图片,请在设置界面打开相关权限',
success: (res) => {
if (res.confirm) {
uni.openSetting()
}
}
})
}
}
})
// #endif
}
})
},
previewImage(index) { //预览图片
uni.previewImage({
urls: this.imageList,
current:this.imageList[index]
});
},
},
onReady() {
}
}
</script>
<style>
page {
background-color: #EFEFF4;
}
.input-view {
font-size: 28upx;
}
.close-view{
text-align: center;line-height:14px;height: 16px;width: 16px;border-radius: 50%;background: #FF5053;color: #FFFFFF;position: absolute;top: -6px;right: -4px;font-size: 12px;
}
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)