图片预览与上传-蒲公英云

小编推荐：Fundebug提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大佬公司都在使用。

1.图片预览

Ⅰ.转成临时url的方式

NO.	步骤
1	要有type=”file”的input才可以选择图片
2	用于预览效果的img
3	上传图片后，显示预览，写一个事件（某些操作后再做一些事）利用onchange值改变事件
4	将拿到的图片文件转成临时的url
5	将临时url赋值给img的src属性

<body>
    <!-- 要有type="file"的input才可以选择图片 -->
    <!-- 加multiple可以支持多选 -->
    <input type="file" id="file" multiple>
    <!-- 用于预览效果的img -->
    <img src="" alt="" id="icon">
    <script>
        //获取图片预览元素
        var icon = document.getElementById('icon')
        //上传图片后，显示预览，写一个事件（某些操作后再做一些事） 利用onchange值改变事件
        document.getElementById('file').onchange = function(){
            //首先想办法拿到你选择的那张图片
            //file元素有一个属性叫files，它是一个数组（为了支持多选管理），里面保存了你刚刚选择的那个图片/文件
            console.log(this.files[0]);
            //将文件转成URL的方案
                //Ⅰ.转成临时URL:URL.createObjectURL(文件),临时URL会在页面关闭后失效
                //Ⅱ.转成永久URL：选择文件后发ajax请求服务器→服务器把图片保存起来，再返回图片的永久路径
            // 临时URL方案
            var url = URL.createObjectURL(this.files[0]);
            console.log(url);
            icon.src = url;         
        }
    </script>
</body>

Ⅱ.转成永久url的方式，引入ajax2.0，详情看代码注释！

NO.	步骤
1	要有type=”file”的input才可以选择图片
2	用于预览效果的img
3	上传图片后，显示预览，写一个事件（某些操作后再做一些事）利用onchange值改变事件
4	将拿到的图片文件发送给服务器存储起来，再返回图片永久url
5	将永久url赋值给img的src属性

以下代码需要配合php和apache才能运行

<!-- 要有type="file"的input才可以选择图片 -->
    <!-- 加multiple可以支持多选 -->
    <input type="file" id="file" multiple>
    <!-- 用于预览效果的img -->
    <img src="" alt="" id="icon">
    <script>
        //获取图片预览元素
        var icon = document.getElementById('icon')
        //上传图片后，显示预览，写一个事件（某些操作后再做一些事） 利用onchange值改变事件
        document.getElementById('file').onchange = function(){
        //1.上传图片发送给服务器，以前学的ajax不能异步上传文件，只能提交字符串形式
        //2.最早上传文件只能用表单来进行，但是表单会有跳转页面的缺点
        //由于上述的两点引入了ajax2.0，用FormData对象可以异步上传文件
           var xhr = new XMLHttpRequest();
           xhr.open('post',uploadPic.php);
        //ajax2.0使用步骤
            //Ⅰ.创建FormData对象
            var fm = new FormData();
            //Ⅱ.调用对象的append方法，添加要给服务器提交的文件
            //参数1：键，参数2：值
            //键的作用：就是让服务器通过这个键获取你的值
            fm.append('icon',this.files[0]);
            //Ⅲ.send里传递FormData对象就行了
            //FormData会自动设置请求头，不用再设置
            console.log(fm);
            xhr.send(fm);
            xhr.onload = function(){
               icon.src = xhr.responseText;
            }
        }
    </script>

2.图片（文件）上传：以前都是用表单上传文件，但是页面会跳转，现在有了ajax2.0

Ⅰ.原生js运用ajax2.0

<body>
    <form action="">
        <input type="text" placeholder="请输入姓名" name="name">
        <input type="text" placeholder="请输入年龄" name="age">
        <input type="text" placeholder="请输入职业" name="job">
        <input type="text" placeholder="请输入薪资" name="salary">
        <input type="file" name="icon">
    </form>
    <input type="button" id="btn" value="点我收集数据并ajax提交给服务器">
    <script>
        //找到表单
        var form = document.querySelector('form');
        //找到所有的input
        var input = document.getElementsByTagName('input')
        document.getElementById('btn').onclick = function(){
            //创建请求对象
            var xhr = new XMLHttpRequest();
            //设置请求行
            xhr.open('post','data.php')
            //创建FormData对象
            var fm = new FormData();
            // 方法一:键值对一一对应添加
            //这种方法太low
            // fm.append('name',input[0].value);
            // fm.append('age',input[1].value);
            // fm.append('job',input[2].value)
            // fm.append('salary',input[3].value)
            // fm.append('icon',input[4].files[0])
            //方法二：
            //创建FormData对象,并传入表单对象
            //如果传入表单对象，会自动找到表单里所有带name属性的表单元素
            //name的值作为键，它的内容作为值提交给服务器
            //跟jQuery的表单序列化很像，表单序列化拿不到file文件
            //注意：这里只能传DOM的表单对象，不能传jQuery对象！
            var fm = new FormData(form);
            //发送请求
            xhr.send(fm);
            //监听响应完成事件
            xhr.onload = function(){
                console.log(xhr.responseText);  
            }
        }
    </script>
</body>

Ⅱ.jQuery运用ajax2.0

<body>
    <form action="">
        <input type="text" placeholder="请输入姓名" name="name">
        <input type="text" placeholder="请输入年龄" name="age">
        <input type="text" placeholder="请输入职业" name="job">
        <input type="text" placeholder="请输入薪资" name="salary">
        <input type="file" name="icon">
    </form>
    <input type="button" id="btn" value="点我收集数据并jQuery的ajax提交给服务器">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
        $('#btn').click(function(){
            //直接用FormData对象获取表单里的值
            var fm = new FormData($('form')[0]);
            //底下直接用data:fm会报错
            //原因一：jQuery发ajax请求的时候会自动把data的对象转成字符串
                //因为fm也是一个对象，jQuery也想把它转成字符串，但转不成功，报错
                //解决办法：告诉jQuery，你不用帮我做转换，增加底下这句
                //processData:false
            //原因二：jQuery会自动帮我们设置请求头，但是Formdata也会设置请求头
                //两个一起设置冲突了
                //解决办法：告诉jQuery,你不要帮我设置请求头，增加底下这句
                //contentType:false
            $.ajax({
                type:"post",
                url:"data.php",
                data:fm,
                processData:false,
                contentType:false,
                success:function(obj){
                    console.log(obj);
                }
            })
        })
    </script>
</body>

3.vue中的图片预览与上传

Element-UI中的Upload 上传组件

传送门http://element-cn.eleme.io/#/zh-CN/component/upload，查看用户头像上传

//html代码
<el-form :model="formData" enctype="multipart/form-data">
    <el-form-item label="反馈类型" :label-width="formLabelWidth">
        <el-select class="selects" v-model="formData.type" placeholder="请选择您的提交类型">
            <el-option label="需求" value="需求"></el-option>
            <el-option label="缺陷" value="缺陷"></el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="反馈标题" :label-width="formLabelWidth">
       <el-input v-model="formData.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="反馈内容" :label-width="formLabelWidth">
       <el-input type="textarea" v-model="formData.content" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="上传照片" :label-width="formLabelWidth">
                //action 必选参数，上传的地址
        //：show-file-list 是否显示已上传文件列表
        //：on-success 文件上传成功时的钩子
            //：before-upload 上传文件文件之前的钩子，参数为上传的文件
          <el-upload
             class="avatar-uploader"
             :action="UploadUrl()"
             :show-file-list="false"
             :on-success="handleAvatarSuccess"
             :before-upload="beforeAvatarUpload">
             <img v-if="imageUrl" :src="imageUrl" class="avatar">
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
    </el-form-item>
</el-form>
//js代码
//data中的数据
data() {
    return {
      formData: {
        name: "",
        content: "",
        type: "",
        icon: ""
      },
      formLabelWidth: "120px",
      imageUrl: ''
    };
  }
//methods中添加方法
    handleAvatarSuccess(res, file) {
      //图片预览
      this.imageUrl = URL.createObjectURL(file.raw);
      //将文件添加给formData对象的icon属性，用于上传
      this.formData.icon = file.raw;
    }