目录
一、vue上传图片（一）代码（二） 注意事项
二、ionic上传图片（一）代码1、在module中引用FileUploadModule2、HTML中代码3、ts中代码
（二） 注意事项
一、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信息和头信息的属性。
