一、html布局文件

html有一个自己的上传文件控件---input，只需要将其type属性设置为file即可上传文件，accept=“image/”是用来限制文件类型为image，input代码如下：

 <input class="input-upload" type="file" accept="image/*"  name="pic" >

之后，我们还需要一个image标签来存放图片的预览：

<img v-bind:src="demand.image" /> //v-bind是vue.js的用法，将src的属性绑定为demand.image，可支持动态改变src的值，减少dom操作

完整的html代码：

<div id="ImageUploader" data-vpid="<%-VPID%>" data-vpcon="`{MODURL}`.js">
<div class="filearea"><span class="btn-upload icon-enclosure"><input class="input-upload" type="file" accept="image/*"  name="pic" ></span><div class="preview" ><i class="hide"></i><img v-bind:src="demand.image" /><div class="remove icon-delete"></div></div>
</div>
</div>

二、css样式

对应的css样式：

@import "src/node_modules/views/global/sass/mixin";#ImageUploader {position: relative;.btn-upload {position: relative;overflow: hidden;width: 1.57rem;height: 1.05rem;border: solid 1px $blue;display: table-cell; vertical-align: middle;text-align: center;color: $blue;z-index: 20;margin-top: 10px;margin-left: 15px;}.input-upload {position: absolute;top: 0;right: 0;margin: 0;opacity: 0;-ms-filter: 'alpha(opacity=0)';cursor: pointer;direction: ltr;font-size: 200px !important;  /* 为了能点中，弄个超大字号 */}.preview {position: absolute;}img {max-width: 1.57rem;max-height: 1.05rem;}.remove {position: absolute;top: -8px;right: -8px;z-index: 10;width: 0.16rem;height: 0.16rem;border-radius: 50%;color: white;background: $blue; font-size: 0.11rem;text-align: center;padding-top: 2px;}
}

三、TS代码

本人的用的是TS写的，编辑器可以自动将TS转化为JS，图片的预览有两种方法，一是根据input获取html5 JS对象；而是根据file对象生成一个图像URL，即下面代码中的function1和function2

import * as tomato from "@po-to/tomato";
import * as project from "views/global/common/Project";
import * as funs from "views/global/common/Funs";
import * as model from "views/global/common/Model";
import * as Vue from "vue";
import css = require("./css");    //在js中引入css样式
import * as api from "views/global/common/API";class VPresenter extends project.VPresenter {/**模块 */private ImageUploader_vue: any;/**预览图片 */private img;private preview;/**input控件 */private inputUpload;private btnUpload: JQuery;/**demand */private demand;// private form;constructor(view: tomato.VPView, parent?: tomato.VPresenter, vpid?: string) {super(view, parent, vpid);var aaa = css;//hackvar user = model.globalData.user;var demand = this.demand = model.globalData.demand;var that = this;
//取到html中的元素
this.preview = this.find(".preview");this.btnUpload = this.find(".btn-upload ");this.inputUpload = this.find(".input-upload");/**删除预览 */this.preview.on('click', function () {that.demand.image = '';that.setImg();});/**预览上传图片 */this.inputUpload.on('change', function (event) {// 根据这个 <input> 获取文件的 HTML5 js 对象var files = event.target.files, file;if (files && files.length > 0) {// 获取目前上传的文件file = files[0];// 来在控制台看看到底这个对象是什么console.log(file);// 那么我们可以做一下诸如文件大小校验的动作if (file.size > 1024 * 1024 * 2) {alert('图片大小不能超过 2MB!');return false;}// 图片预览 function 1if (window['FileReader']) {var reader = new FileReader();} else {alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");}var reader = new FileReader();var imageType = /^image\//;//是否是图片if (!imageType.test(file.type)) {alert("请选择图片！");return;}//读取完成reader.onload = function (e) {//图片路径设置为读取的图片that.demand.image = this.result;};reader.readAsDataURL(file);// 图片预览 function 2// 下面是关键的关键，通过这个 file 对象生成一个可用的图像 URL// 获取 window 的 URL 工具// var URL = window.URL || window['webkitURL'];// 通过 file 生成目标 url// var imgURL = URL.createObjectURL(file);// 用这个 URL 产生一个 <img> 将其显示出来// demand.image = imgURL;// 使用下面这句可以在内存中释放对此 url 的伺服，跑了之后那个 URL 就无效了// URL.revokeObjectURL(imgURL);
that.fileUpload(file);//预览出现后调用上传方法，传值为一个file对象，也可以传demand.image预览地址，看服务器那边怎么要求的}});this.setImg();//this._watchEvent();}/** 初始化*/private setImg() {/**是否有图片 */if ("" == this.demand.image) {this.preview.addClass("hide");this.btnUpload.removeClass("hide");} else {this.btnUpload.addClass("hide");this.preview.removeClass("hide");}}/**上传文件，参数:订单id和文件对象 */private fileUpload(file) {var that=this;var demand_id = this.demand.id;var formData = new FormData();formData.append('demand_id', demand_id);formData.append('file', file);$.ajax({xhrFields: {withCredentials: true},//ajx请求时带上cookieurl: 'http://dev.v2.api.wanpinghui.com/Img/uploadDemandPlaceImage',type: 'POST',cache: false,data: formData,processData: false,contentType: false}).done(function (json) {console.log("::"+json.image);model.globalData.demand.image = json.image;}).fail(function (json) { });}
}
export = VPresenter;