vue实现图片上传

实现思路：
1.通过点击事件打开文件夹，选取需要上传的图片
2.拿到图片数据，将其添加到FromData实例对象中
3.将图片数据上传至服务器

目录

vant 上传
input 上传
element-ui 上传

vant组件实现上传

组件安装及引入

//安装
npm i vant -S
//引入
import Vue from 'vue';
import { Uploader } from 'vant';

Vue.use(Uploader);

vue组件内使用

//点击即可调用
<van-uploader 
v-model="fileList"   //上传的文件数据
:preview-image="false" 	//不显示预览
:after-read="afterRead">	//选中文件后回调函数
上传图片
</van-uploader>

上传至服务器

<script>
export default {
  data () {
    return {
      fileList: [],
    };
  },
  methods: {
    afterRead (e) {
      console.log(e.file);//拿到图片数据
      let form = new FormData()	//生成表单数据对象
      form.append('file', e.file)	//将图片添加至表单对象中
      this.$API.uploaderImg(form).then(res => { //上传至服务器
        console.log(res);	//返回值包含图片在服务器上的路径
      }
   } 
};
</script>

input实现上传

需要组件
<input type="file" @change="getFile" />
组件属性

1. accept 可限制上传到文件属性 值为字符串
   image/* 选取所以图片格式
   .jpg 选取jpg格式
   .doc 选取doc文件
2. multiple
   当指定布尔类型属性,允许用户选择多个文件。

组件

<input id="fileInp" type="file" @change="getFile" accept="image/*" />

功能

getFile (e) {
      let fileImgPath = document.getElementById('fileInp')
      console.log(fileImgPath.files[0])
      //拿到文件数据
      let form=new FormData()
      form.append('file',fileImgPath.files[0])
      //上传
      this.$API.uploaderImg(form).then(res => {
        console.log(res);
      })
    }

element 实现图片上传

element提供了Upload 上传组件 我们可以通过点击或者拖拽上传文件

//上传组件 action为上传路径 list-type文件列表的样式 
//on-preview	悬浮在图片上会显示删除和预览功能
//on-remove		删除的勾子函数
//:headers		手动添加请求头信息
//:limit="1"	决定上传数量 element无法隐藏第二个上传框，可以自定义样式（overflow:hidden）解决
//模板html内容
<el-upload
     action="http://120.53.31.103:84/api/public/img"
     list-type="picture-card"
     :on-preview="handlePictureCardPreview"
     :on-remove="handleRemove"
     :limit="1"
     :headers="token"
     class="upload_box">
  <i class="el-icon-plus"></i>
</el-upload>
//悬浮界面，删除和预览
<el-dialog :visible.sync="dialogVisible">
//预览大图片展示区域
<img width="100%" :src="dialogImageUrl" alt />
</el-dialog>

//js内容
<script>
data(){
	return{
	  imageUrl: '',  //图片路径
      dialogImageUrl: '',  //预览大图
      dialogVisible: false,		//图片悬浮遮罩层
      token: {
        Authorization: "Bearer " + localStorage.getItem('token'),
      },
	}
}
methods:{
//图片上传
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    //图片悬浮界面
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //图片删除
    handleRemove (res, file) {
      // console.log(res);
      this.imageUrl = ''
    },
}
</script>

//样式内容
<style>
  // 头像
  .upload_box {
    width: 300px !important;
    height: 148px !important;
    overflow: hidden !important;
  }
</style>