vue移动端知识点积累-CFANZ编程社区

vue移动端知识点积累

修改头像的方法

方式一

先将图片存储到服务器上，获取返回的图片文件在服务器的 http 访问地址，请求上传图片,获取上传返回的结果，将img的src设置为返回的结果

方法二：

单以客户端上传

// 图片的对象
const file = fileInput.files[0]
//固定写法

// 设置图片的 src
img.src = window.URL.createObjectURL(file)

示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>客户端图片上传预览示例</title>
  <style>
    .img-wrap {
      width: 200px;
      height: 200px;
      border: 1px solid #ccc;
    }

    img {
      max-width: 100%;
    }
  </style>
</head>
<body>
  <h1>客户端图片上传预览示例</h1>
  <div class="img-wrap">
    <img src="" alt="" id="img">
  </div>
  <br>
  <input type="file" id="file" onchange="onFileChange()">
  <script>
    const img = document.querySelector('#img')
    const file = document.querySelector('#file')

    function onFileChange() {
      // 得到 file-input 的文件对象
      const fileObj = file.files[0]
      const data = window.URL.createObjectURL(fileObj)
      img.src = data
    }
  </script>
</body>
</html>

裁剪组件

npm i cropperjs

导入

import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs

使用

data () {
    return {
        cropper: null   // 裁剪器对象
    }
}

mounted () {
    const image = this.$refs.img
    this.cropper = new Cropper(image, {
      viewMode: 1,
      dragMode: 'move',
      aspectRatio: 1,
      // autoCropArea: 1,
      cropBoxMovable: false,
      cropBoxResizable: false,
      background: false
    })
    // 不能在这里调用 this.cropper.getCroppedCanvas() 方法！因为裁剪器还没初始化好！
}

项目到最后的时候更改一下vue.config.js的配置

const isPord = process.env.NODE_ENV === "production";
module.exports = {
  lintOnSave: false,
  publicPath: isPord ? "./" : "/", //处理 相对路径问题
  productionSourceMap: false, // 优化不要map文件
};

然后执行yarn build进行打包打包之前确定运行没问题没有bug 交出dist目录之后该干啥干啥

0 条评论