VUE附件的上传

 

 选择的附件转化为base64

 pathToBase64 代码

function getLocalFilePath(path) {
    if (path.indexOf('_www') === 0 || path.indexOf('_doc') === 0 || path.indexOf('_documents') === 0 || path.indexOf('_downloads') === 0) {
        return path
    }
    if (path.indexOf('file://') === 0) {
        return path
    }
    if (path.indexOf('/storage/emulated/0/') === 0) {
        return path
    }
    if (path.indexOf('/') === 0) {
        var localFilePath = plus.io.convertAbsoluteFileSystem(path)
        if (localFilePath !== path) {
            return localFilePath
        } else {
            path = path.substr(1)
        }
    }
    return '_www/' + path
}

var index = 0
function getNewFileId() {
    return Date.now() + String(index++)
}

function biggerThan(v1, v2) {
    var v1Array = v1.split('.')
    var v2Array = v2.split('.')
    var update = false
    for (var index = 0; index < v2Array.length; index++) {
        var diff = v1Array[index] - v2Array[index]
        if (diff !== 0) {
            update = diff > 0
            break
        }
    }
    return update
}




export function pathToBase64(path) {
    return new Promise(function(resolve, reject) {
        if (typeof window === 'object' && 'document' in window) {
            if (typeof FileReader === 'function') {
                var xhr = new XMLHttpRequest()
                xhr.open('GET', path, true)
                xhr.responseType = 'blob'
                xhr.onload = function() {
                    if (this.status === 200) {
                        let fileReader = new FileReader()
                        fileReader.onload = function(e) {
                            resolve(e.target.result)
                        }
                        fileReader.onerror = reject
                        fileReader.readAsDataURL(this.response)
                    }
                }
                xhr.onerror = reject
                xhr.send()
                return
            }
            var canvas = document.createElement('canvas')
            var c2x = canvas.getContext('2d')
            var img = new Image
            img.onload = function() {
                canvas.width = img.width
                canvas.height = img.height
                c2x.drawImage(img, 0, 0)
                resolve(canvas.toDataURL())
                canvas.height = canvas.width = 0
            }
            img.onerror = reject
            img.src = path
            return
        }
        if (typeof plus === 'object') {
            
            if(path.startsWith('http') || path.startsWith('https') ){
                uni.downloadFile({  
                            url: path,   
                            success: (res) => {  
                                    if (res.statusCode === 200) {  
                                        console.log('下载成功');  
                                       path = res.tempFilePath
                                        
                                    }  
                                 console.log(res.tempFilePath);  
                                  console.info(path)
                                  plus.io.resolveLocalFileSystemURL(getLocalFilePath(path), function(entry) {
                                      console.info(1111)
                                      entry.file(function(file) {
                                          var fileReader = new plus.io.FileReader()
                                          fileReader.onload = function(data) {
                                              resolve(data.target.result)
                                          }
                                          fileReader.onerror = function(error) {
                                              reject(error)
                                          }
                                          fileReader.readAsDataURL(file)
                                      }, function(error) {
                                          reject(error)
                                      })
                                  }, function(error) {
                                      reject(error)
                                  })
                                  
                            }  
                        });
            }else{
                plus.io.resolveLocalFileSystemURL(getLocalFilePath(path), function(entry) {
                    console.info(1111)
                    entry.file(function(file) {
                        var fileReader = new plus.io.FileReader()
                        fileReader.onload = function(data) {
                            resolve(data.target.result)
                        }
                        fileReader.onerror = function(error) {
                            reject(error)
                        }
                        fileReader.readAsDataURL(file)
                    }, function(error) {
                        reject(error)
                    })
                }, function(error) {
                    reject(error)
                })
            }
            
           
            return
        }
        if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
            wx.getFileSystemManager().readFile({
                filePath: path,
                encoding: 'base64',
                success: function(res) {
                    resolve('data:image/png;base64,' + res.data)
                },
                fail: function(error) {
                    reject(error)
                }
            })
            return
        }
        reject(new Error('not support'))
    })
}

export function base64ToPath(base64) {
    return new Promise(function(resolve, reject) {
        if (typeof window === 'object' && 'document' in window) {
            base64 = base64.split(',')
            var type = base64[0].match(/:(.*?);/)[1]
            var str = atob(base64[1])
            var n = str.length
            var array = new Uint8Array(n)
            while (n--) {
                array[n] = str.charCodeAt(n)
            }
            return resolve((window.URL || window.webkitURL).createObjectURL(new Blob([array], { type: type })))
        }
        var extName = base64.match(/data\:\S+\/(\S+);/)
        if (extName) {
            extName = extName[1]
        } else {
            reject(new Error('base64 error'))
        }
        var fileName = getNewFileId() + '.' + extName
        if (typeof plus === 'object') {
            var basePath = '_doc'
            var dirPath = 'uniapp_temp'
            var filePath = basePath + '/' + dirPath + '/' + fileName
            if (!biggerThan(plus.os.name === 'Android' ? '1.9.9.80627' : '1.9.9.80472', plus.runtime.innerVersion)) {
                plus.io.resolveLocalFileSystemURL(basePath, function(entry) {
                    entry.getDirectory(dirPath, {
                        create: true,
                        exclusive: false,
                    }, function(entry) {
                        entry.getFile(fileName, {
                            create: true,
                            exclusive: false,
                        }, function(entry) {
                            entry.createWriter(function(writer) {
                                writer.onwrite = function() {
                                    resolve(filePath)
                                }
                                writer.onerror = reject
                                writer.seek(0)
                                writer.writeAsBinary(base64.replace(/^data:\S+\/\S+;base64,/, ''))
                            }, reject)
                        }, reject)
                    }, reject)
                }, reject)
                return
            }
            var bitmap = new plus.nativeObj.Bitmap(fileName)
            bitmap.loadBase64Data(base64, function() {
                bitmap.save(filePath, {}, function() {
                    bitmap.clear()
                    resolve(filePath)
                }, function(error) {
                    bitmap.clear()
                    reject(error)
                })
            }, function(error) {
                bitmap.clear()
                reject(error)
            })
            return
        }
        if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
            var filePath = wx.env.USER_DATA_PATH + '/' + fileName
            wx.getFileSystemManager().writeFile({
                filePath: filePath,
                data: base64.replace(/^data:\S+\/\S+;base64,/, ''),
                encoding: 'base64',
                success: function() {
                    resolve(filePath)
                },
                fail: function(error) {
                    reject(error)
                }
            })
            return
        }
        reject(new Error('not support'))
    })
}

graceSelectImgAndUploadx 代码

<template>
	<view class="grace-add-list">
		<view class="grace-add-list-items" v-for="(item, index) in imgLists" :key="index">
			<!-- <image :src="item.url" :data-imgurl="item.url" @tap="showImgs" class="grace-add-list-img" :mode="imgMode"></image> -->
			<view style="width: 100%; padding: 10px;">{{item.name}}</view>
			<view class="grace-add-list-remove grace-icons icon-close" 
			:style="{color:closeBtnColor}" @tap.stop="removeImg" :id="'grace-items-img-'+index"></view>
			<view class="upload-progress">
			   <progress :percent="item.progress" 
			   :stroke-width="progressSize" :activeColor="progressColor" :backgroundColor="progressBGColor" />	
			</view>
			<view class="grace-add-list-reup" @tap.stop="retry" :data-index="index" v-if="item.error">
				<text class="grace-add-list-reup-icon grace-icons icon-retry"></text>
				<text class="grace-add-list-reup-text">失败重试</text>
			</view>
		</view>
		<view class="grace-add-list-items grace-add-list-btn" @tap="addImg" v-if="imgLists.length < maxFileNumber">
			<view class="grace-add-list-btn-icon">+</view>
			<view class="grace-add-list-btn-text">{{btnName}}</view>
		</view>
	</view>
</template>
<script>
var graceJS = require('@/Grace.JS/grace.js');
export default {
	props:{
		maxFileNumber : {
			type : Number,
			default : 9
		},
		btnName : {
			type : String,
			default : "添加文件"
		},
		items : {
			type : Array,
			default : function () {
				return [];
			}
		},
		closeBtnColor : {
			type : String,
			default : "#666666"
		},
		uploadServerUrl : {
			type : String,
			default : ''
		},
		progressSize :{
			type:Number,
			default:1
		},
		progressColor :{
			type:String,
			default:'#27BD81'
		},
		progressBGColor :{
			type:String,
			default:'#F8F8F8'
		},
		fileName : {type:String, default:'img'},
		formData : {type:Object, default:function(){return {};}},
		imgMode:{ type:String, default:'aspectFill'},
		header:{type:Object, default:function(){return {};}},
		save2uniCloud:{type:Boolean, default:false}
	},
	data() {
		return {
			imgLists : [],
			updatting : false
		}
	},
	watch:{
		imgLists : function(newVal, oldVal){
			if(!this.updatting){this.$emit('change', newVal);}
		}
	},
    methods:{
		clearAllImgs : function(){
			this.imgLists = [];
		},
        addImg : function(){
            var num = this.maxFileNumber - this.imgLists.length;
            if(num < 1){return false;}
   //uni.chooseMedia()
   // chooseFile
			uni.chooseFile({
				count: num,
				// sizeType: ['compressed'],
				success:(res) => {
					console.log(res);
					for(let i = 0; i < res.tempFilePaths.length; i++){
						
						console.log(res.tempFiles[i])
						this.imgLists.push({url : res.tempFilePaths[i],name:res.tempFiles[i].name, progress : 0, error : false,fileName:res.tempFiles[i].path});
						console.log(this.imgLists)
					}
				},
				complete:function(){},
				fail:function(){}
			})
			
    //         uni.chooseImage({
    //             count: num,
    //             // sizeType: ['compressed'],
    //             success:(res) => {
				// 	for(let i = 0; i < res.tempFilePaths.length; i++){
				// 		console.log(res.tempFilePaths[i])
				// 		this.imgLists.push({url : res.tempFilePaths[i], progress : 0, error : false});
				// 	}
    //             },
				// complete:function(){},
				// fail:function(){}
    //         });
	           // uni.chooseVideo({
	           //     count: num,
	           //     // sizeType: ['compressed'],
	           //     success:(res) => {
	           // 		for(let i = 0; i < res.tempFilePaths.length; i++){
	           // 			console.log(res.tempFilePaths[i])
	           // 			this.imgLists.push({url : res.tempFilePaths[i], progress : 0, error : false});
	           // 		}
	           //     },
	           // 	complete:function(){},
	           // 	fail:function(){}
	           // });
			  
        },
        removeImg : function(e){
            var index = e.currentTarget.id.replace('grace-items-img-', '');
            var removeImg =  this.imgLists.splice(index, 1);
			this.$emit('removeImg', removeImg[0]);
        },
        showImgs : function(e){
            var currentImg = e.currentTarget.dataset.imgurl;
        	var imgs = [];
        	for(let i = 0; i < this.imgLists.length; i++){
        		imgs.push(this.imgLists[i].url);
        	}
            uni.previewImage({
              urls: imgs,
              current : currentImg
            })
        },
		upload : function(index){
			if(this.updatting){return ;}
			this.updatting = true;
			if(!index){index = 0;}
			uni.showLoading({title:"上传中" });
			if(this.save2uniCloud){
				this.upload2cloud(index);
			}else{
				this.uploadBase(index);
			}
		},
		upload2cloud:function (index) {
			// 全部上传完成
			if(index > (this.imgLists.length - 1)){
				uni.hideLoading();
				this.updatting = false;
				this.$emit('uploaded', this.imgLists);
				return ;
			}
			// 检查是否是默认值
			if(this.imgLists[index].progress >= 1){
				this.upload2cloud(index+1);
				return ;
			}
			this.imgLists[index].error = false;
			// 创建上传对象
			uniCloud.uploadFile({
				filePath  : this.imgLists[index].url,
				cloudPath : graceJS.uuid() + '.png',
				onUploadProgress:(progressEvent) => {
					var percentCompleted = Math.round(
						(progressEvent.loaded * 100) / progressEvent.total
					);
					this.imgLists[index].progress = percentCompleted;
					this.imgLists.splice(index, 1, this.imgLists[index]);
				},
				success : (uploadRes)=>{
					//上传图片成功
					this.imgLists[index].progress = 100;
					this.imgLists[index].url      = uploadRes.fileID;
					this.imgLists[index].result   = uploadRes;
					this.upload2cloud(index+1);
				},
				fail : ()=>{
					uni.showToast({title:"上传失败", icon:"none"});
					this.error(index);
				}
			});
		},
		retry : function (e) {
			var index = e.currentTarget.dataset.index;
			this.upload(index);
		},
		uploadBase : function (index) {
			// 全部上传完成
			if(index > (this.imgLists.length - 1)){
				uni.hideLoading();
				this.updatting = false;
				this.$emit('uploaded', this.imgLists);
				return ;
			}
			// 验证后端
			if(this.uploadServerUrl == ''){
				uni.showToast({title:"请设置上传服务器地址", icon:"none"});
				return ;
			}
			// 检查是否是默认值
			if(this.imgLists[index].progress >= 1){
				this.uploadBase(index+1);
				return ;
			}
			this.imgLists[index].error = false;
			// 创建上传对象
			const task = uni.uploadFile({
				url      : this.uploadServerUrl,
				filePath : this.imgLists[index].url,
				name     : this.fileName,
				formData : this.formData,
				header   : this.header,
				success  : (uploadRes) => {
					uploadRes = JSON.parse(uploadRes.data);
					if(uploadRes.status != 'ok'){
						uni.showToast({title:"上传失败 : "+uploadRes.data, icon:"none"});
						this.error(index);
					}else{
						//上传图片成功
						this.imgLists[index].progress = 100;
						this.imgLists[index].url      = uploadRes.data;
						this.imgLists[index].result   = uploadRes;
						this.uploadBase(index+1);
					}
				},
				fail    : (e) => {
					uni.showToast({title:"上传失败,请点击图片重试", icon:"none"});
					this.error(index);
					
				}
			});
			task.onProgressUpdate((res) => {
				if(res.progress > 0){
					this.imgLists[index].progress = res.progress;
					this.imgLists.splice(index, 1, this.imgLists[index]);
				}
			});
		},
		// 上传错误
		error : function(index){
			this.updatting = false;
			setTimeout(()=>{
				this.imgLists[index].progress = 0;
				this.imgLists[index].error    = true;
				this.$emit('uploaderror');
			}, 500);
		},
		// 设置默认值
		setItems : function(items){
			this.imgLists = [];
			for(let i = 0; i < items.length; i++){
				this.imgLists.push({url : items[i], progress : 100});
			}
		}
    }
}
</script>
<style scoped>
.grace-add-list{display:flex; flex-wrap:wrap;}
.grace-add-list-btn{display:flex; flex-direction:column; align-items:center; justify-content:center;}
.grace-add-list-btn-text{font-size:26rpx; line-height:36rpx; text-align:center; color:#999999; width:100%;}
.grace-add-list-btn-icon{font-size:80rpx; height:80rpx; line-height:80rpx; margin-bottom:20rpx; color:#999999;}
.grace-add-list-items{width:650rpx;  word-break: break-all; margin-bottom:10rpx; margin-right:11rpx; background:#F6F7F8; font-size:0; position:relative; border-radius:10rpx;}
.grace-add-list-remove{width:50rpx; height:50rpx; line-height:50rpx; text-align:center; font-size:40rpx; position:absolute; z-index:5; right:10rpx; top:10rpx; color:#888888;}
.upload-progress{position:absolute; z-index:2; left:0; bottom:10rpx; width:180rpx; padding:0 21rpx;}
.grace-add-list-reup{position:absolute; z-index:3; left:0; top:0rpx; width:222rpx; height:222rpx; display:flex; justify-content:center; align-items:center; background-color:rgba(0,0,0,0.3);flex-direction:column;}
.grace-add-list-reup-icon{text-align:center; width:100%; color:#FFFFFF; display:block; font-size:80rpx; line-height:100rpx;}
.grace-add-list-reup-text{text-align:center; width:100%; color:#FFFFFF; display:block; font-size:20rpx; line-height:30rpx;}
.grace-add-list-img{width:222rpx; height:222rpx;}
</style>

index页面代码

<template>
	<view class="page-bg">
		<view class="main-container">
			<view class="" style="">
				<view style="text-align:center; font-size: 18px; font-weight: bold;padding-top: 20px;">群众反映问题线索征集</view>
				<view style=" font-size: 16px; margin-top: 20px; padding: 0 15px;" >此次专项整治主要聚焦道路交通安全和运输执法领域“逐利执法”、执法不规范、执法方式简单僵化、执法粗暴、执法“寻租”等问题,请广大人民群众按照专项整治重点内容,实事求是地反映有关情况和问题线索。</view>
			</view>
			<view class="page">
				
				<view class="feedback-title feedback-body"><text class="uni-uploader-title">姓名</text></view>
				<view class="feedback-body"><input class="feedback-input" v-model="sendData.name" placeholder="请输入您的姓名" /></view>
				<view class="feedback-title feedback-body"><text class="uni-uploader-title"><text style="color: red;">*</text>联系方式</text></view>
				<view class="feedback-body"><input class="feedback-input" maxlength="11" type="number" v-model="sendData.mobile" placeholder="请输入可联系到您的手机号码" /></view>
				<view class="feedback-title"  >
					<text style="margin-right: 10px; width: 20%; justify-content: flex-start;"><text style="color: red;">*</text>所属领域</text>
				</view>
				<view style="justify-content: flex-start; margin-left: 10px;">
					<radio-group @change="radioChange">
						<label >
							<radio  :value="'0'"  checked="checked" />交通安全(公安)
							<radio :value="'1'" style="" />运输执法(交通)
						</label>
					</radio-group>
				</view>
				
				<view class="uni-list-cell" style="display: flex;justify-content: center;align-items: center; margin-top: 10px;" >
					<view class="feedback-title" style="width: 18%;"><text class="uni-uploader-title">所属地址</text></view>
					<view class="uni-list-cell-db" style="display: flex;width: 80%;padding-right: 10px;">
						<picker style="width: 170rpx;" @change="picker" mode='selector' :value="arrayIndex" :range="arrayList" range-key="value">
								<view class="picker" v-model="sendData.xzqhProvince">{{arrayList[arrayIndex].value}}</view>
						</picker>
						<picker  style="width: 170rpx;" @change="bindPickerChange1" mode='selector' :value="arrayIndex1" :range="arrayList1" range-key="name">
							<view class="picker" v-model="sendData.xzqhCity">{{arrayList1[arrayIndex1].name}}</view>
						</picker>
						<picker  style="width: 170rpx;" @change="bindPickerChange2" mode='selector' :value="arrayIndex2" :range="arrayList2" range-key="name">
							<view class="picker" v-model="sendData.xzqhDistrict">{{arrayList2[arrayIndex2].name}}</view>
						</picker>
					</view>
				</view>
				<view >
					<view class="feedback-title" style=" justify-content: flex-start;"><text style="color: red;">*</text>投诉建议内容</view>
				</view>
				<view class="feedback-body margin-text-row">
				  <textarea placeholder="写下你的投诉/建议吧..." v-model="sendData.content" maxlength="200" class="feedback-textare"></textarea>
				  <view class="num tl-p-right">{{sendData.content.length}}/200</view>
				</view>
				<!-- <view class="feedback-title"><text>图片(选填,提供问题截图,总大小10M以下)</text></view> -->
				<view class="feedback-body feedback-uploader">
				  <view class="uni-uploader">
				    <view class="uni-uploader-head" style="display: flex;justify-content: space-between;">
				      <view class="feedback-title">附件</view>
				      <!-- <view class="feedback-title">0/9</view> -->
				    </view>
					<view style="margin-top:5rpx;">
						<graceSelectImgAndUploadx :maxFileNumber="9" ref="selectimganduploadx" @removeImg="removeImg" 
						@uploaded="imgLoaded" @change="imgsChange" @uploaderror="uploaderror" ></graceSelectImgAndUploadx>
					</view>
				  </view>
				</view>
				
				<button class="feedback-submit"   @tap="send" >提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { pathToBase64} from '@/common/image-tools/index.js';
	import {ctx} from '../../common/urls.js';
	import { http } from '@/common/http-request/index.js';
	var that
	export default {
		data() {
			return {
				arrayIndex: 0,
				arrayIndex1:0,
				arrayIndex2:0,
				arrayList1:[
					{
						id:'',
						name:"请选择",
					}
				],
				arrayList2:[
					{
						id:'',
						name:"请选择",
					}
				],
				arrayList: [
					{
						code: 340000,
						value: '安徽省'
					}
				],
				activeRadio:0,
				arrayValue:'',
				arrayValue1:'',
				arrayValue2:'',
				arrayItem:{},
				arrayItem1:{},
				arrayItem2:{},
				selectedimgs : [],//选择图片
				imageList: [],
				sendData: {
					name:'',
					mobile:'',
				  content: '',
				  category:'',
				  xzqhProvince:'',
				  xzqhCity:'',
				  xzqhDistrict:'',
				  files:[
					  {
						  fileName:'',
						  base64:''
					  }
				  ]
				},
				items:[
					{
						value: 0,
						name: '公安'
					},
					{
						value: 1,
						name: '交通'
					},
				]
			}
		},
		onLoad() {
			this.getCityList()
		},
		methods: {
			picker(e){
				this.arrayIndex = e.target.value;
				
			},
			bindPickerChange1: function(e) {
				console.log('picker发送选择改变,携带值为', e)
				this.arrayIndex1 = e.detail.value
				this.arrayValue = this.arrayList1[this.arrayIndex1].id;
				this.getDistrictList()
			},
			bindPickerChange2: function(e) {
				console.log('picker发送选择改变,携带值为', e)
				this.arrayIndex2 = e.detail.value
				this.arrayValue2 = this.arrayList2[this.arrayIndex2].id;
			},
			radioChange: function(e) {
				this.activeRadio = e.detail.value;
				
				//this.activeRadio存的是选中的Value的值
				console.log(this.activeRadio);
			},
			getCityList:function(){
				let that=this
				let url = ctx+'/lawManage/getCity';
				let data={
				}
				http.get(url, data).then(res => {
					if (res.statusCode==200) {
						let list = res.data;
						console.log('111111111'+JSON.stringify(list));
						list.forEach(item => {
							that.arrayList1.push({
								id: item.xzqhCode,
								name: item.xzqhName
							});
						});
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						});
					}
				});
			},
			getDistrictList:function(){
				let that=this
				let url = ctx+'/lawManage/getDistrict/'+that.arrayValue;
				let data={
					
				}
				http.get(url, data).then(res => {
					if (res.statusCode==200) {
						let list1 = res.data;
						list1.forEach(item => {
							that.arrayList2.push({
								id: item.xzqhCode,
								name: item.xzqhName
							});
						});
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						});
					}
				});
			},
			send() {
				that = this;
				if(!that.sendData.mobile){
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}else if(!/^1[34578]\d{9}$/.test(that.sendData.mobile)){
					uni.showToast({
						title: '请填写正确的手机号',
						icon: 'none'
					});
					return; 
				}
			  //发送反馈
			  if (this.sendData.content.length === 0) {
			    uni.showModal({
			      content: '请输入投诉建议',
			      showCancel: false
			    });
			    return;
			  }
			  uni.showLoading({
			    title: '上传中...'
			  });
			  let url = ctx + '/lawManage/receiveComplaint';
			  let subData = {
			  
			  		name:that.sendData.name,
			  		mobile:that.sendData.mobile,
			  		content: that.sendData.content,
			  		category:parseInt(that.activeRadio),
			  		xzqhProvince:'340000',
			  		xzqhCity:that.arrayValue,
			  		xzqhDistrict:that.arrayValue2,
			  		files:that.sendData.files,
			  	
			  };
			  uni.showLoading({
			  	title: '提交中'
			  });
			  console.log(subData);
			  http.post(url, subData).then(res => {
			  	uni.hideLoading();
				console.log(res);
			  	if (res.data.status=='success') {
			  		uni.hideLoading();
			  		uni.showToast({
			  			title: '提交成功',
			  			icon: 'none'
			  		});
			  		setTimeout(function(){
						uni.reLaunch({
							url:'/pages/index/index'
						})
			  		},1000)
			  	} else {
			  		uni.hideLoading();
			  		uni.showToast({
			  			title: res.data.message,
			  			icon: 'none'
			  		});
			  	}
			  	
			  });
			  
			},
			uploaderror : function(){
				console.log('上传过程遇到错误');
			},
			// 选择图片时引起的数据变化
			imgsChange : function (imgs){
				this.selectedimgs = imgs;
				console.log(this.selectedimgs)
				// this.selectedimgs.name = that.fileName
				this.getSubmitFiles()
			},
			getSubmitFiles: async function() {
				that =this
				let files = [];
				that.sendData.files = [];
				for (let i = 0; i < that.selectedimgs.length; i++) {
				    var base64 = await pathToBase64(that.selectedimgs[i].url);
					console.log(base64)
					console.log(that.selectedimgs[i].name)
					var file = {
						"fileName":that.selectedimgs[i].name,
						"base64":base64
					};
					that.sendData.files.push(file);			
				}
			},
			imgLoaded : function(res){
				this.subtxt = "数据提交中";
				console.log(res);
				console.log(this.textareaVal);
				// 提交数据 图片信息保存在 res 内[ 数组形式 ]
				// 内容保存在 textareaVal
				//连接 api 提交即可
				//提交成功页面跳转
			},
			removeImg : function (e) {
				console.log(e);
			},
		}
	}
</script>

<style>
.picker {
	color: #999999;
	margin-right: 10px;
	width: 100%;
	box-sizing: border-box;
	padding: 5px 20px;
	text-align: center;
	border: 1px solid #8f8f94;
}
.page{
	margin-top: 20px;
}
.page-bg {
  width: 100vw;
  height: auto;
  background-size: 750rpx auto;
  background-image: linear-gradient(180deg,#07bbed 80rpx,white 500rpx);
}

.main-container {
  width: 686rpx;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.tl-font-32-29{
  font-size: 32rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #292929;
}

/*问题反馈*/
.feedback-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  color: #8f8f94;
  font-size: 28rpx;
}
.feedback-star-view.feedback-title {
  justify-content: flex-start;
  margin: 0;
}
.feedback-quick {
  position: relative;
  padding-right: 40rpx;
}
.feedback-quick:after {
  font-family: uniicons;
  font-size: 40rpx;
  content: '\e581';
  position: absolute;
  right: 0;
  top: 50%;
  color: #bbb;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.feedback-body {
  position: relative;
  background: #fff;
}
.tl-p-right{
  position: absolute;
  right: 50rpx;
  bottom: 20rpx;
  font-size:13px
}
.feedback-textare {
  width: 630rpx;
  height: 274rpx;
  border-radius: 8rpx;
  margin: 0 auto;
  border: 2rpx solid #DCDCDC;
}
.feedback-input {
  font-size: 30rpx;
  height: 50rpx;
  min-height: 50rpx;
  padding: 15rpx 20rpx;
  line-height: 50rpx;
  border-bottom: 2rpx solid #DCDCDC;
}
.feedback-uploader {
  padding: 22rpx 20rpx;
}
.feedback-star {
  font-family: uniicons;
  font-size: 40rpx;
  margin-left: 6rpx;
}
.feedback-star-view {
  margin-left: 20rpx;
}
.feedback-star:after {
  content: '\e408';
}
.feedback-star.active {
  color: #FFB400;
}
.feedback-star.active:after {
  content: '\e438';
}
.feedback-submit {
 background: #007AFF;
  color: #FFFFFF;
  margin: 20px 20rpx 20px 20rpx;
}
.tl-btn-red{
 /* width: 500rpx;*/
  height: 72rpx;
  line-height: 72rpx;
  background: #E7E7E7;
  border-radius: 44rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #565656;
  border:0 2rpx solid #E7E7E7;
}
.active{
  background: #E04646;
  color: #fff;
  border: 0;

}

.demo2 {
	height: 60rpx;
	width: 200rpx;
}
.margin-text-row {
	/* margin-left: 50upx; */
	margin-top: 20upx;
}

</style>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值