vue和ionic上传图片功能实现

一、vue上传图片

（一）代码

 <upload
      action
      name="file"
      :limit="1"
      :show-file-list="true"
      :before-upload="beforeUpload"
 >
<Button icon="ios-cloud-upload-outline">上传图片</Button>

beforeUpload(file) {
            const isLt1M = file.size / 1024 / 1024 < 1;
            if (!isLt1M) {
                this.$Notice.warning({
                        'title': '提示',
                        'desc': '上传图片大小不能超过 1MB!'
                    });
            } else {
                let param = new FormData();
            var vm = this;
            param.append("file", file, file.name);
            let config = {
                headers: { "Content-Type": "multipart/form-data" }
            };
            axios
                .post(vm.kernel + "/medal/uploadPC", param, config)
                .then(uploadRes => {
                vm.formCustom.name = uploadRes.data.data;
                });
            }     
        },

（二） 注意事项

我们可以直接在action事件写后端上传图片的方法，需要在上传之前做一些判断，我们就可以写到beforeLoad方法中，这里直接在beforeLoad中调用了上传图片的方法是因为我需要把token信息和头信息添加进去，但是这样还存在一个问题就是action会将当前路径默认为上传图片的路径，然后前端页面就会报错。可以找一些有没有属性来设置 token和头信息的。

二、ionic上传图片

（一）代码

1、在module中引用FileUploadModule

//上传图片
import { FileUploadModule } from 'ng2-file-upload';

const routes: Routes = [
  {
    path: '',
    component: AddActivityPage
  }
];

@NgModule({
  imports: [
    //上传图片
    FileUploadModule
  ],
  declarations: [AddActivityPage]
})
export class AddActivityPageModule {}

2、HTML中代码

<div class="picPlace">
   //图片回显
   <img id="wizardPicturePreview2" name="picture" src="{{picture}}" style="height:100px;width:190px;position:relative;left:10px;display:block; border:1px solid #CCC" alt="" class="picture-src" title="" /> 
   //上传图片提示
   <a style="color: red;font-size:12px;position:relative;left:10px;">*提示：图片大小不超过1M。 </a>  
   //上传图片 input框type为file
   <input type="file" #file id="file" class="showPicture" style="margin-left: 10px;font-size:15px" ng2FileSelect  [uploader]="uploader" (change)="selectedFileOnChanged(file)"> 
 </div>

3、ts中代码

import { FileUploader } from 'ng2-file-upload';

// 上传图片相关变量
  editPicture: boolean = true;
  data: any;
  picture: string;
  fileName: string;
  // 声明一个FileUploader类型的变量，并将其初始化
  public uploader: FileUploader = new FileUploader({
    url: environment.kernelUrl + '/medal/upload',
    method: 'POST',
    authToken: localStorage.getItem('Authorization'),
    headers: [
      {name: 'companyId', value: localStorage.getItem('schoolNo') + 'BnaL7HrFBqYVsLude4MNVd'}],
    maxFileSize: 1024 * 1024,
    // autoUpload: true,
    removeAfterUpload: true,
    itemAlias: 'multfile'
    // allowedFileType: ['image']
  });
  
  // 选择上传图片
  public selectedFileOnChanged(file: HTMLInputElement) {
    // let length: number;
    this.editPicture = !this.editPicture;
    this.fileName = file.value;
    const fileDot: string = this.fileName.substring(this.fileName.lastIndexOf('.') + 1, this.fileName.length);

    const fileSize = 1 * 1024 * 1024; // 文件限制大小
    const fileSize1 = file.files[0].size;
    if (fileSize1 > fileSize) {
      super.showToast(this.toastCtrl, '图片大小过大！');
      return;
    }

    // 将上传对象的withCredentials设为false，不发送凭据，因此它不会违反通配符+凭证组合。
    this.uploader.onBeforeUploadItem = (item) => {
      item.withCredentials = false;
    };

    // 开始上传
    this.uploader.queue[0].upload();
    this.uploader.queue[0].onSuccess = function (response, status, headers) {
      // 上传文件成功
      if (status === 200) {
        // 上传文件后获取服务器返回的数据
        const temRes = JSON.parse(response);
        this.data = temRes.data;
        localStorage.setItem('picUrl', this.data);
        // 修改页面图片
        const el: Element = document.getElementById('wizardPicturePreview2');
        el.setAttribute('src', this.data);

        // length = data.length;
        // data = data.substring(21, length);
        //  this.picture = this.data;
      } else {
        alert('上传图片失败');
      }
    };

（二） 注意事项

一定要在页面所在的module引用相关的内容，否则会报错。
这里就为我们提供了设置token信息和头信息的属性。