123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125 |
- <template>
- <view class="content">
- <g-upload ref='gUpload' :mode="imgList" @chooseFile='chooseFile' @imgDelete='imgDelete' :control='control' :columnNum="columnNum"></g-upload>
- <button type="primary" @click="uploadFileToServe">提交</button>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- title: 'Hello',
- control: true,
- columnNum: 4,
- imgList: [],
- urlList:[]
- // imgList: ['/static/logo.png']
- }
- },
- onLoad() {
- /*
- mode:
- 需要回填的图片数组,
- 上传的时候渲染临时路径,二次进入时可以选择渲染服务返回的图片,
- 此时删除图片完成后需要及时更新mode(imgList)的值
- */
- },
- methods: {
- /*
- 上传后返回的值:
- list:上传后图片数组
- v:返回当前上传图片的临时路径
- */
- chooseFile(list, v) {
- console.log("上传图片_list:", list)
- console.log("上传图片_v:", v);
- this.urlList=list;
- console.info("urlList",this.urlList);
- //this.uploadFileToServe(v)
- },
- /*
- 删除图片:
- list:删除返回删除后剩余的图片数组
- eq:返回删除的数组
- */
- imgDelete(list, eq) {
- console.log("删除图片_list:", list);
- console.log("删除图片_eq:", eq);
- this.urlList=list;
- console.info("urlList",this.urlList);
- },
- //控件内外部切换
- switch1Change(e) {
- this.control = !this.control
- },
- //图片行个数切换
- switch2Change(e) {
- this.columnNum = this.columnNum == 3 ? '4' : '3'
- },
- /*
- 执行上传服务:
- urlList:要上传的图片:数组类型
- */
- uploadFileToServe() {
- var urlList=this.urlList;
- if (!urlList || urlList.length <= 0) {
- return
- };
- //console.info(urlList);
- //return;
- for (let i = 0; i < urlList.length; i++) {
- uni.uploadFile({
- url: '/api/Requisition/UploadImage',
- filePath: urlList[i],
- name: 'file',
- formData: {
- createPerson:this.$store.state.user.userCode,
- masterCode:'100009'
- },
- headers: {
- 'Content-Type': 'multipart/form-data; boundary = ' + new Date().getTime()
- //这里要把content-type设置为multipard/form-data,同时还要设置boundary
- },
- success: (uploadFileRes) => {
- console.log(uploadFileRes.data);
- }
- });
- }
- }
- }
- }
- </script>
- <style scoped>
- .content {
- padding: 40rpx;
- }
- /* 上传控件 */
- .uploadControl {
- border: 1rpx solid #eee;
- border-radius: 10rpx;
- width: 130rpx;
- display: block;
- height: 130rpx;
- text-align: center;
- line-height: 130rpx;
- font-size: 30rpx;
- color: #888;
- background-color: #EEEEEE;
- }
- </style>
|