Vue读取本地图片的实现方式

一、使用input标签读取本地图片

通过input标签的type属性设置为file，可以在网页上弹出系统文件选择对话框，用户可以从本地选择所需要的图片，然后可以通过FileReader对象将文件转换成Data URL。Vue框架可以通过v-bind绑定到img标签上实现图片的预览。

  
  
   
  <script>
    export default {
      data () {
        return {
          imageUrl: ''
        }
      },
      methods: {
        handleFileChange (e) {
          const file = e.target.files[0]
          const reader = new FileReader()
          reader.readAsDataURL(file)
          reader.onload = e => {
            this.imageUrl = e.target.result
          }
        }
      }
    }
  </script>
  

二、使用filepond插件实现图片上传

FilePond是一个轻量级的JavaScript插件，用于文件上传和管理。FilePond支持多种文件上传方式，包括拖放、粘贴、文件选择等。在Vue项目中安装FilePond，然后使用vue-filepond组件即可实现文件上传和图片预览功能。

  
  
   
  <script>
    import vueFilePond from 'vue-filepond'
    import 'filepond/dist/filepond.min.css'
    import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type'
    import FilePondPluginImagePreview from 'filepond-plugin-image-preview'
    import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css'
    import FilePondPluginImageResize from 'filepond-plugin-image-resize'

    export default {
      components: {
        filePond: vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview, FilePondPluginImageResize)
      },
      data () {
        return {
          files: []
        }
      }
    }
  </script>
  

三、使用axios上传图片到后台服务器

在Vue项目中通过axios库，可以将图片上传到服务器。可以在Vue项目中编写上传图片的方法，然后通过axios.post方法将图片数据发送到服务器进行保存。

  
  
   

  <script>
      import axios from 'axios';

      export default {
          data() {
              return {
                  file: null
              }
          },
          methods: {
              handleFileUpload(event) {
                  this.file = event.target.files[0];
              },
              uploadPhoto() {
                  let formData = new FormData();
                  formData.append('image', this.file);

                  axios.post('http://localhost:3000/upload', formData, {
                      headers: {
                          'Content-Type': 'multipart/form-data'
                      }
                  }).then(() => {
                      console.log('上传成功')
                  }).catch(() => {
                      console.log('上传失败')
                  });
              }
          }
      }
  </script>
  

四、使用vue-cropper组件实现图片裁剪

在Vue项目中使用vue-cropper插件可以方便的实现图片的裁剪功能。使用vue-cropper可以让用户自行选择并调整图片的大小，将所需要的部分裁剪出来保存。

  
  
   

  <script>
    import VueCropper from 'vue-cropper'

    export default {
      components: {
        VueCropper
      },
      data () {
        return {
          image: 'image.jpg',
          cropData: null,
          croppedImage: null,
          cropperOptions: {
            viewMode: 1,
            dragMode: 'move',
            aspectRatio: 1 / 1,
            cropBoxResizable: false,
            guides: false,
            crop: () => {
              this.cropData = JSON.stringify(this.$refs.cropper.getCropBoxData())
            }
          }
        }
      }
    }
  </script>
  

五、使用element-ui组件库实现图片上传

在Vue项目中使用element-ui组件库的Upload组件可以方便的实现图片的上传功能。element-ui的Upload组件提供了多种上传方式，并支持进度条、文件类型等功能。

  
  
   

  <script>
    export default {
      data() {
          return {
              fileList: []
          };
      },
      methods: {
          handlePreview(file) {
            console.log(file);
          },
          handleRemove(file, fileList) {
            console.log(file, fileList);
          },
          handleSuccess(response, file, fileList) {
            console.log(response, file, fileList);
          },
          submitUpload(type) {
              this.$refs.upload.submit();
          }
      }
    }
  </script>