<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="chooseImg">提交</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.chooseImg();
        },
		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)
				}
					const token = uni.getStorageSync('key');
				//path是上面传进来的File对象
				uni.uploadFile({
					url: 'http://localhost:8056/api/File/UpLoad?module=434',
					filePath:URL.createObjectURL(file), //blob格式，或者转base64，结果一样
					//files:imgObj,
					//filePath:'filePath',
					formData:imgObj,
					name:'file',
					header:{
						//"Content-Type": "multipart/form-data",
						'token':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() {
				   document.getElementById("file").click();
				 
			},
            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>

但是加了请求头也会在请求的时候额外加了Request Payload的参数呀，不明白是怎么处理的，总之去掉请求头就能上传成功，有大神可以出来解答一下吗…

如果您也喜欢它,动动您的小指点个赞吧