上传
在这里我们上传图片由一个input和我们根据自己需求写的上传按钮（不同的需求要求上传的方式不同），先完成Input的编写，根据我们自己的需求使用其属性(此项目为vue项目，部分ui采用的elment-ui)
type='file' accpet='image/png,image/jpg' mutiple ref='input' @change='selectedFile' style='display:none'>
'content'>
"rect-box-style image-manager-add-button" @click="addPic">
"plus">+
"local-uploads-title">只能上传png jpg
'image-content' v-for='(item,index) in items' :key=index :class='item.type == 'png' ? 'item-type-png':'item-type-jpg'>
1.input中用到了type='file'（file属性值为供文件上传，不要使用iamge,此属性为定义上传按钮为iamge形式）
2.accpeet为上传图片的类型限制
3.mutiple允许一次上传多张图片
4.设一个ref,方便下面按钮点击时，触发此input的上传事件
5.绑定上传文件的一个方法，触发此方法时可对上传图片的大小，类型等等做出限制
6.style='display:none' 为什么要设置display:none?因为此input只提供功能,不露面（终极打工仔），后面的点击按钮才是用户眼中的上传图片功能（泪目）
selectedFile方法，addPic方法，deleteImg方法
computed:{
//此项目使用了vuex，所有本地数据都存在了store里了，所有取图片列表如下方法
items:(){
return this.$store.state.upload.image.items;
}
},
method:{
selectedFile(e) {
const files = e.currentTarget.files;
if (files.length === 0) return;
for (let i = 0; i < files.length; i++) {
if (files[i].size > MAX_FILE_SIZE) {
Message({
message: "图片大小不能超过5MB",
type: "error",
duration: 3 * 1000
});
return;
}
}
this.$store.dispatch("upload/uploadImages", ["image", files]);//将文件上传
},
addPic(){
this.$refs[input].click();//点击上传按钮，触发input上传事件
},
deleteImg(id, index) {
this.$store.dispatch("upload/deleteUserResources", ["image", id, index]);
} //将要删除的图片id,index传参
}
复制代码以上变为一个图片上传的，展示，删除的流程。下面为截图
图片样式保护按钮样式之类的就不贴了，可以根据自己的需求写，以上