二、项目代码：

思路： 通过input标签调用手机的相册相机功能，获取图片文件，通过formdata传给后台，后台返回图片路径，获取图片路径显示在页面上。

注意： 因为直接用input标签样式不太好看，也不符合UI的设计需求，所以这里将调取手机相册和相机的input框隐藏了，然后点击下边的标签触发input事件

template

<input class="hide_file" ref ="leftFile" id="upload" type="file" @change="getFile($event)" accept="image/*">
<div class="camera" @click="clickFile">
     <img v-if="img" class="bigImg" :src="img" alt="">
     <img v-if="!img" class="icon" src="~@/assets/img/icon_camera.png" alt="">
     <span v-if="!img" class="text">上传照片</span>
methods:{ 
	// 获取选择的图片文件上传
	getFile(e) {
        let file = e.target.files[0];  
        console.log(file);
        let param = new FormData(); //创建form对象
        param.append('file',file,file.name);//通过append向form对象添加数据  
        param.append("id",this.token); 
         console.log(file);
         let config = {
             headers:{
                 'Content-Type':'multipart/form-data',
         };  //添加请求头
         axios.post('/wx/goods/uploadPicture',param,config) 
         .then(res=>{
             if(res.data.code==0){
                 this.img = res.data.url;
                 this.newImg = res.data.url;
                 // this.$Message.success(res.data.msg) 
             }else{
                 // this.$Message.error(res.data.msg)
    // 点击触发input的点击事件
    clickFile(){
        this.$refs.leftFile.click();
.hide_file{
    ;
.camera{
    position: relative;
    z-index: 2;
    margin: 0 auto;
    margin-bottom: 10px;
    width: 138px;
    height: 138px;
    background: #E7E7E7;
    border-radius: 6px;
    text-align: center;
    .bigImg{
        width: 138px;
        height: 138px;
    .icon{
        width: 40px;
        margin-top: 40px;
    .text{
        display: block;
        line-height: 22px;
        font-size: 15px;
        color: #999;
        margin-top: 8px;
                    一、基础知识：1.只调用手机相册&lt;input type="file" accept="image/*;" &gt;2.只调用手机相机拍照&lt;input type="file" accept="image/*" capture="camera"&gt;3.调用手机相册和拍照&lt;input type="file" accept="image/*"&gt;二、项目代码：思路： 通过input标签调用手机的相册相机功能，获取图片文件，通过formdata传给后台，后台返回图片路径
<input type="file" accept="image/png,image/gif,image/jpeg" capture="camera" >
可以直接调用相机，安卓手机需要支持，必须修改accept参数
				
在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方，本来移动端开发H5应用，准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用，但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题，所以最后拍照上传功能还是使用input file方式里解决的。但是内心还是不甘心的，由于项目进度推进，迭代版本，所以不得不放弃，后续可能我将此功能使用调用H5+接口实现。
首先我来讲我实现这个拍照预览压缩上传的思路，准确的说应该是拍照或选择图片压缩之后预览及上传这个流程。每次拍照或选择一张图片-然后压缩图片-预览上传。上传图片压缩插件是localResize
调用摄像头拍照
在h5中，使用input type="file"的 capture="camera"这个属性就可以调用摄像头
在这里我们使用的是ElementUI的组件，实际这个组件里面是包含一个input type="file"的元素的
所以我们只需要修改这个元素的capt...
				
H5移动端打开摄像头和打开相册
参考文档：http://www.html5plus.org/doc/zh_cn/camera.html
！！！plus在PC端运行时会报错，只有打包后在手机端运行时才能运行
//选择打开摄像头还是打开相册
  takePhoto(){
            let that = this;
            let bts = [
				
您好，针对Vue移动端上传图片，可以使用以下几个插件：
1. vant：vant是一套基于Vue.js的轻量级移动端组件库，其中包括van-uploader组件，支持多文件上传和拍照上传。通过设置capture属性为camera可以开启相机上传，不设置则默认为相册上传。因此，如果您不希望用户使用相机上传，可以直接不设置capture属性。
2. vue-cropper：vue-cropper是一款基于Vue.js的图片裁剪插件，支持上传本地图片进行裁剪和预览。通过设置属性中的aspectRatio为0，即可禁用相机上传。
3. vue-image-crop-upload：vue-image-crop-upload是一款基于Vue.js的图片上传裁剪组件，支持上传本地图片进行裁剪和预览。通过设置属性中的camera属性为false，即可禁用相机上传。
以上三款插件都可以实现禁用相机拍照的效果，您可以根据自己的需求选择使用。