精华内容
下载资源
问答
  • 微信小程序上传头像后对图片进行裁剪的功能,这是必要的核心代码,放在组件文件夹中就可以使用
  • 最近在做微信小程序上传头像和上传照片功能就随手写一下代码:  上传头像html:  头像    <image class=head-portrait src={{avatar}} bindtap='changeAvatar'></image>   js代码: // 切换头像 ...
  • 微信小程序上传头像

    2021-07-02 18:18:06
    3. 修改原来的小程序头像并保存,调用后台接口修改操作 我这里也贴出来了,不够详细可以去官网看。 1、选择图片接口 wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照。 OBJECT参数说明: 参数类型...

    这一篇主要说头像 上传,以及修改保存的功能。本章节主要用的知识点有

    1. wx.chooseImage 从本地相册选择图片或使用相机拍照。

    2.wx.uploadFile 将本地资源上传到服务器.

    3. 修改原来的小程序头像并保存,调用后台接口修改操作

    我这里也贴出来了,不够详细可以去官网看。

    1、选择图片接口

    wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照。

    OBJECT参数说明:

    参数类型必填说明

    count

    Number

    最多可以选择的图片张数,默认9

    sizeType

    StringArray

    original 原图,compressed 压缩图,默认二者都有

    sourceType

    StringArray

    album 从相册选图,camera 使用相机,默认二者都有

    success

    Function

    成功则返回图片的本地文件路径列表 tempFilePaths

    fail

    Function

    接口调用失败的回调函数

    complete

    Function

    接口调用结束的回调函数(调用成功、失败都会执行)

    success返回参数说明:

    参数类型说明最低版本

    tempFilePaths

    StringArray

    图片的本地文件路径列表

    tempFiles

    ObjectArray

    图片的本地文件列表,每一项是一个 File 对象

    我这里先贴官方是例子出来。

    wx.chooseImage({
    count: 1, // 默认9

    sizeType: [‘original‘, ‘compressed‘], // 可以指定是原图还是压缩图,默认二者都有

    sourceType: [‘album‘, ‘camera‘], // 可以指定来源是相册还是相机,默认二者都有

    success: function (res) {
    // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片

    var tempFilePaths = res.tempFilePaths

    }

    })

    View Code

    第二步:

    2、上传图片接口 wx.uploadFile(OBJECT)

    将本地资源上传到开发者服务器。我们通过 wx.chooseImage 等接口获取到一个本地资源的临时文件路径后,可通过此接口将本地资源上传到指定服务器。客户端发起一个 HTTPS POST 请求,其中content-type 为multipart/form-data 。

    OBJECT参数说明:

    参数类型必填说明

    url

    String

    开发者服务器 url

    filePath

    String

    要上传文件资源的路径

    name

    String

    文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容

    header

    Object

    HTTP 请求 Header, header 中不能设置 Referer

    formData

    Object

    HTTP 请求中其他额外的 form data

    success

    Function

    接口调用成功的回调函数

    fail

    Function

    接口调用失败的回调函数

    complete

    Function

    接口调用结束的回调函数(调用成功、失败都会执行)

    success返回参数说明:

    参数类型说明

    data

    String

    开发者服务器返回的数据

    statusCode

    Number

    开发者服务器返回的 HTTP 状态码

    官方实例代码:

    wx.chooseImage({
    success: function(res) {
    var tempFilePaths = res.tempFilePaths

    wx.uploadFile({
    url: ‘https://example.weixin.qq.com/upload‘, //仅为示例,非真实的接口地址

    filePath: tempFilePaths[0],

    name: ‘file‘,

    formData:{
    ‘user‘: ‘test‘

    },

    success: function(res){
    var data = res.data

    //do something

    }

    })

    }

    })

    是否看到这里对选择图片和上传的接口了解很多,

    第三步:代码实现

    接下来这里就是真正的操作代码,为了大家方便看,我这里都注释了代码:

    没修改之前。                                                           修改后并保存数据库

    这里的样式自已调

    头像

    js模块,

    注意:

    wx.uploadFile自已有一个this,我们格外定义的var _this = this 到时候赋值的时候把this带进来就OK了。

    //点击图片选择手机相册或者电脑本地图片

    changeAvatar: function(e) {var _this = thiswx.chooseImage({
    count:1,//默认9

    sizeType: [‘original‘, ‘compressed‘],//可以指定是原图还是压缩图,默认二者都有

    sourceType: [‘album‘, ‘camera‘],//可以指定来源是相册还是相机,默认二者都有

    success: function(res) {//返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片

    var tempFilePaths =res.tempFilePaths;//这里是上传操作

    wx.uploadFile({
    url: getApp().globalData.clientUrl+ ‘/uploadAvatarUrl‘, //里面填写你的上传图片服务器API接口的路径

    filePath: tempFilePaths[0],//要上传文件资源的路径 String类型

    name: ‘avatar‘,//按个人情况修改,文件对应的 key,开发者在服务器端通过这个 key 可以获取到文件二进制内容,(后台接口规定的关于图片的请求参数)

    header: {"Content-Type": "multipart/form-data"//记得设置

    },

    formData: {//和服务器约定的token, 一般也可以放在header中

    ‘session_token‘: wx.getStorageSync(‘session_token‘)

    },

    success:function(res) {//当调用uploadFile成功之后,再次调用后台修改的操作,这样才真正做了修改头像

    if (res.statusCode = 200) {//var data = res.data

    //var statusCode = res.statusCode

    //console.log("返回值1" + data);

    //console.log("返回值2" + statusCode)

    //这里调用后台的修改操作, tempFilePaths[0],是上面uploadFile上传成功,然后赋值到修改这里。

    wx.request({
    url: getApp().globalData.clientUrl+ ‘/update?avatar=‘ + tempFilePaths[0], //真正修改操作,填写你们修改的API

    header: {‘content-type‘: ‘application/json‘,

    },

    method:‘POST‘,

    success:function(res) {if (res.data.code == 200) {
    wx.showToast({
    title:‘修改成功‘,

    icon:‘success‘,

    duration: 2500})//wx.uploadFile自已有一个this,我们刚才上面定义的var _this = this 把this带进来

    _this.setData({"user.avatar": tempFilePaths[0]

    });

    }

    },

    })

    }

    }

    })

    }

    })

    },

    这样就实现了修改小程序的头像了,希望帮到正在奋斗的你,遇见更好的你。

    这篇文章哪里还不足的话,希望路过的大神指点指点小弟。
    ————————————————
    版权声明:本文为CSDN博主「Lindsay Zou」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/weixin_28688385/article/details/114017544

    展开全文
  • { }) function uploadImage(filePath, cb) { //个人封装的简单的上传单张图片上传的方法 wx.uploadFile({ url: “xxx/xx/xx”, filePath: filePath, name: 'file', header: { "Content-Type": "multipart/form-data...

    import WeCropper from '../../we-cropper/we-cropper.js'

    const device = wx.getSystemInfoSync()

    const width = device.windowWidth

    const height = device.windowHeight - 50

    Page({

    data: {

    cropperOpt: {

    id: 'cropper',

    width,

    height,

    scale: 2.5,

    zoom: 8,

    cut: {

    x: (width - 300) / 2,

    y: (height - 300) / 2,

    width: 300,

    height: 300

    }

    }

    },

    touchStart(e) {

    this.wecropper.touchStart(e)

    },

    touchMove(e) {

    this.wecropper.touchMove(e)

    },

    touchEnd(e) {

    this.wecropper.touchEnd(e)

    },

    //这个是保存上传裁剪后的图片的方法

    getCropperImage() {

    var that = this

    this.wecropper.getCropperImage((avatar) => {

    if (avatar) {

    uploadImage(avatar, function (res) { })

    function uploadImage(filePath, cb) {   //个人封装的简单的上传单张图片上传的方法

    wx.uploadFile({

    url: “xxx/xx/xx”,

    filePath: filePath,

    name: 'file',

    header: {

    "Content-Type": "multipart/form-data"

    },

    formData: {

    token: getApp().globalData.userData.token,

    userName: "",

    portrait: filePath

    },

    success: function (res) {

    // 获取到裁剪后的图片

    wx.switchTab({

    url: `../A/A?avatar=${avatar}`   如果需要这图片地址就传过去 ,因为我上传后跳转页面后会自己获取服务器的是地址了。这里仅提供思路参考。

    })

    console.log('上传图片成功')

    console.log(res);

    wx.showToast({

    title: '上传成功',

    })

    cb(res);

    },

    fail: function (res) {

    console.log('上传图片失败!')

    console.log(res)

    wx.showToast({

    title: '上传失败',

    })

    },

    })

    }

    } else {

    console.log('获取图片失败,请稍后重试')

    }

    })

    },

    uploadTap() {

    const self = this

    wx.chooseImage({

    count: 1, // 默认9

    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有

    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有

    success(res) {

    const src = res.tempFilePaths[0]

    // 获取裁剪图片资源后,给data添加src属性及其值

    self.wecropper.pushOrign(src)

    }

    })

    },

    onLoad(option) {

    const { cropperOpt } = this.data

    if (option.src) {

    cropperOpt.src = option.src

    new WeCropper(cropperOpt)

    .on('ready', (ctx) => {

    console.log(`wecropper is ready for work!`)

    })

    .on('beforeImageLoad', (ctx) => {

    console.log(`before picture loaded, i can do something`)

    console.log(`current canvas context:`, ctx)

    wx.showToast({

    title: '上传中',

    icon: 'loading',

    duration: 20000

    })

    })

    .on('imageLoad', (ctx) => {

    console.log(`picture loaded`)

    console.log(`current canvas context:`, ctx)

    wx.hideToast()

    })

    .on('beforeDraw', (ctx, instance) => {

    console.log(`before canvas draw,i can do something`)

    console.log(`current canvas context:`, ctx)

    })

    .updateCanvas()

    }

    }

    })

    展开全文
  • 直接从项目里面拿出来的代码,附带了很多其他代码可供参考,都是亲测测试通过的。里面还附带了php后端代码文件。
  • 适应场景:用户上传、修改头像等等 //上传头像 upShopLogo () { wx.chooseImage({ count:1, //一次上传的数量 sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], // album 从相册选图...

    适应场景:用户上传、修改头像等等

      //上传头像
      upShopLogo () {
          wx.chooseImage({
            count:1, //一次上传的数量
            sizeType: ['original', 'compressed'],
            sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
            success: res=>{
              var tempFilePaths = res.tempFilePaths
              console.log(tempFilePaths)
              wx.uploadFile({
                url:这里是后端给的接口!!!,
                filePath: tempFilePaths[0],
                name: 'avatar',
                header: {
                  "Content-Type": "multipart/form-data",
                  'token': token值,自己想办法拿到放这来,
                },
                success:res=> console.log(res),
                fail:err=>console.log(err)
              })
            }
          })
      },
    

    结束!可以上传了!如果上传不了那你可能是没有配置域名,让运维配置一下,如果运维不会就骂他,他还嘴就打他,打不过那你就自己配置一下域名

    展开全文
  • } } 微信小程序端 wxml <block wx:if="{{isMe}}"> <image src="{{faceUrl}}" class="face" bindtap='changeFace'>image> block> !isMe}}"> <image src="{{faceUrl}}" class="face">image> block> js data: { ...

    SpringBoot

        <!-- 引入swagger2 -->
            <dependency>
                <groupId>io.springfox</groupId>
                <artifactId>springfox-swagger2</artifactId>
                <version>2.9.2</version>
            </dependency>
            <dependency>
                <groupId>io.springfox</groupId>
                <artifactId>springfox-swagger-ui</artifactId>
                <version>2.9.2</version>
            </dependency>
             <!--集成通用mapper -->
            <dependency>
                <groupId>tk.mybatis</groupId>
                <artifactId>mapper-spring-boot-starter</artifactId>
                <version>1.2.4</version>
            </dependency>
              <!-- apache 工具类 -->
            <dependency>
                <groupId>commons-codec</groupId>
                <artifactId>commons-codec</artifactId>
                <version>1.11</version>
            </dependency>
            <dependency>
                <groupId>org.apache.commons</groupId>
                <artifactId>commons-lang3</artifactId>
                <version>3.4</version>
            </dependency>
            <dependency>
                <groupId>org.apache.commons</groupId>
                <artifactId>commons-io</artifactId>
                <version>1.3.2</version>
            </dependency>
    

    WebMvcConfig 配置

    package com.study.config;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
    
    /**
     * 虚拟目录配置
     * 将服务目录映射成web资源
     */
    @Configuration
    public class WebMvcConfig extends WebMvcConfigurerAdapter {
    	@Override
    	public void addResourceHandlers(ResourceHandlerRegistry registry) {
    		//swagger增加url映射
    		registry.addResourceHandler("/**")
    		         //swagger2静态资源文件配置
    				.addResourceLocations("classpath:/META-INF/resources/")
    				.addResourceLocations("classpath:/META-INF/resources/templates/")
    				.addResourceLocations("file:F:/weChatProject/movieProject/movieSystem/");
    	}
    }
    

    UserController

    import java.io.File;
    import java.io.FileOutputStream;
    import java.io.InputStream;
    import com.study.base.result.JSONResult;
    import org.apache.commons.io.IOUtils;
    import org.apache.commons.lang3.StringUtils;
    import org.springframework.web.bind.annotation.*;
    import org.springframework.web.multipart.MultipartFile;
    import io.swagger.annotations.Api;
    import io.swagger.annotations.ApiImplicitParam;
    import io.swagger.annotations.ApiOperation;
    
    
    @RestController
    @Api(value="用户相关业务的接口", tags= {"用户相关业务的controller"})
    @RequestMapping("/user")
    public class UserController extends BasicController {
    	
    	@Autowired
    	private UserService userService;
    
    //http://localhost:8080/swagger-ui.html
    //http:localhost:8080/1002/face/a.png
    	/**
    	 * 用户上传头像(单张)
    	 * @param userId
    	 * @param files
    	 * @return
    	 * @throws Exception
    	 */
    	@ApiOperation(value="用户上传头像", notes="用户上传头像的接口")
    	@ApiImplicitParam(name="userId", value="用户id", required=true, 
    						dataType="String", paramType="query")
    	@PostMapping("/uploadFace")
    	public JSONResult uploadFace(String userId, @RequestParam("file") MultipartFile[] files) throws Exception {
    		if (StringUtils.isBlank(userId)) {
    			return JSONResult.errorMsg("用户id不能为空...");
    		}
    		// 文件保存的命名空间
    		String fileSpace = "F:/WeChatProject/movieProject/movieSystem";
    		// 保存到数据库中的相对路径
    		String uploadPathDB = "/" + userId + "/face";
    		
    		FileOutputStream fileOutputStream = null;
    		InputStream inputStream = null;
    		try {
    			//如果微信端传来的头像不为空
    			if (files != null && files.length > 0) {
    				//获取文件名
    				String fileName = files[0].getOriginalFilename();
    				//如果文件名不为空
    				if (StringUtils.isNotBlank(fileName)) {
    					// 文件上传的最终保存路径
    					String finalFacePath = fileSpace + uploadPathDB + "/" + fileName;
    					// 设置数据库保存的路径
    					uploadPathDB += ("/" + fileName);
    					
    					File outFile = new File(finalFacePath);
    					//判断父文件夹是否存在
    					if (outFile.getParentFile() != null || !outFile.getParentFile().isDirectory()) {
    						// 父文件夹不存在则创建父文件夹
    						outFile.getParentFile().mkdirs();
    					}
    					
    					fileOutputStream = new FileOutputStream(outFile);
    					inputStream = files[0].getInputStream();
    					IOUtils.copy(inputStream, fileOutputStream);
    				}
    				
    			} else {
    				return JSONResult.errorMsg("上传出错...");
    			}
    		} catch (Exception e) {
    			e.printStackTrace();
    			return JSONResult.errorMsg("上传出错...");
    		} finally {
    			if (fileOutputStream != null) {
    				fileOutputStream.flush();
    				fileOutputStream.close();
    			}
    		}
    		
    		Users users=new Users();
    		users.setId(userId);
    		users.setFaceImage(uploadPathDB);
    		//修改用户信息
    		userService.updateUserInfo(users);
    		return JSONResult.ok(uploadPathDB);
    	}
    

    xml

    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
    <mapper namespace="com.study.mapper.UsersMapper" >
      <resultMap id="BaseResultMap" type="com.study.model.Users" >
        <!--
          WARNING - @mbg.generated
        -->
        <id column="id" property="id" jdbcType="VARCHAR" />
        <result column="username" property="username" jdbcType="VARCHAR" />
        <result column="password" property="password" jdbcType="VARCHAR" />
        <result column="face_image" property="faceImage" jdbcType="VARCHAR" />
        <result column="nickname" property="nickname" jdbcType="VARCHAR" />
        <result column="fans_counts" property="fansCounts" jdbcType="INTEGER" />
        <result column="follow_counts" property="followCounts" jdbcType="INTEGER" />
        <result column="receive_like_counts" property="receiveLikeCounts" jdbcType="INTEGER" />
      </resultMap>
     
    </mapper>
    

    MyMapper

    package com.study.base.mapper;
    import tk.mybatis.mapper.common.Mapper;
    import tk.mybatis.mapper.common.MySqlMapper;
    
    public interface MyMapper<T> extends Mapper<T>, MySqlMapper<T> {
        //TODO
        //FIXME 特别注意,该接口不能被扫描到,否则会出错
    }
    

    UserMapper

    package com.study.mapper;
    import com.study.base.mapper.MyMapper;
    import com.study.model.Users;
    
    public interface UsersMapper extends MyMapper<Users> {
    }
    

    SpringBoot主类

    //import org.mybatis.spring.annotation.MapperScan;
    import org.springframework.context.annotation.ComponentScan;
    import tk.mybatis.spring.annotation.MapperScan;
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    
    @SpringBootApplication
    //扫描mapper文件
    @MapperScan("com.study.mapper")
    @ComponentScan(basePackages = {"com.study","com.study.config"})
    public class WechatMovieManageApplication {
    
        public static void main(String[] args) {
            SpringApplication.run(WechatMovieManageApplication.class, args);
        }
    }
    

    service

    @Service
    public class UserServiceImpl implements UserService {
    
    	@Resource
    	private UsersMapper userMapper;
    	
    	@Transactional(propagation = Propagation.REQUIRED)
    	@Override
    	public void updateUserInfo(Users user) {
    		Example userExample = new Example(Users.class);
    		Example.Criteria criteria = userExample.createCriteria();
    		//通过ID查询用户
    		criteria.andEqualTo("id", user.getId());
    		//updateByExampleSelective是将一行中某几个属性更新,而不改变其他的值
    		userMapper.updateByExampleSelective(user, userExample);
    	}
    
    }
    

    JSONResult

    package com.study.base.result;
    
    /**
     * @Description: 自定义响应数据结构
     * 				这个类是提供给门户,ios,安卓,微信商城用的
     * 				门户接受此类数据后需要使用本类的方法转换成对于的数据类型格式(类,或者list)
     * 				其他自行处理
     * 				200:表示成功
     * 				500:表示错误,错误信息在msg字段中
     * 				501:bean验证错误,不管多少个错误都以map形式返回
     * 				502:拦截器拦截到用户token出错
     * 				555:异常抛出信息
     */
    public class JSONResult {
    
        // 响应业务状态
        private Integer status;
    
        // 响应消息
        private String msg;
    
        // 响应中的数据
        private Object data;
        
        private String ok;	// 不使用
    
        public static JSONResult build(Integer status, String msg, Object data) {
            return new JSONResult(status, msg, data);
        }
    
        public static JSONResult ok(Object data) {
            return new JSONResult(data);
        }
    
        public static JSONResult ok() {
            return new JSONResult(null);
        }
        
        public static JSONResult errorMsg(String msg) {
            return new JSONResult(500, msg, null);
        }
        
        public static JSONResult errorMap(Object data) {
            return new JSONResult(501, "error", data);
        }
        
        public static JSONResult errorTokenMsg(String msg) {
            return new JSONResult(502, msg, null);
        }
        
        public static JSONResult errorException(String msg) {
            return new JSONResult(555, msg, null);
        }
    
        public JSONResult() {
    
        }
    
        public JSONResult(Integer status, String msg, Object data) {
            this.status = status;
            this.msg = msg;
            this.data = data;
        }
    
        public JSONResult(Object data) {
            this.status = 200;
            this.msg = "OK";
            this.data = data;
        }
    
        public Boolean isOK() {
            return this.status == 200;
        }
    
        public Integer getStatus() {
            return status;
        }
    
        public void setStatus(Integer status) {
            this.status = status;
        }
    
        public String getMsg() {
            return msg;
        }
    
        public void setMsg(String msg) {
            this.msg = msg;
        }
    
        public Object getData() {
            return data;
        }
    
        public void setData(Object data) {
            this.data = data;
        }
    
    	public String getOk() {
    		return ok;
    	}
    
    	public void setOk(String ok) {
    		this.ok = ok;
    	}
    
    }
    
    

    微信小程序端

    wxml

    <block wx:if="{{isMe}}">
          <image src="{{faceUrl}}" class="face" bindtap='changeFace'></image>
        </block>
        <block wx:if="{{!isMe}}">
          <image src="{{faceUrl}}" class="face"></image>
        </block>
    

    js

    data: {
        faceUrl: "../resource/images/noneface.png",
        isMe: true,
     },
      /**
       *上传头像
      */
      changeFace: function () {
        var me = this;
        wx.chooseImage({
          count: 1,//最多选择的图片张数,默认是9
          sizeType: ['compressed'],//original原图;compressed压缩图,默认两者都有
          sourceType: ['album'],//album从相册选图,camera使用相机,默认两者都有
          success: function (res) {//成功则返回图片的本地文件路径列表tempFilePaths
            //返回选定照片的本地文件路径列表, tempFilePath可以作为img标签的src属性显示图片
            var tempFilePaths = res.tempFilePaths;
            console.log(tempFilePaths);
            wx.showLoading({
              title: '上传中...',
            })
            var serverUrl = app.serverUrl;
            // fixme 修改原有的全局对象为本地缓存
            var userInfo = app.getGlobalUserInfo();
            console.log(userInfo);
            wx.uploadFile({
              url: serverUrl + '/user/uploadFace?userId='+app.userInfo.id,  //app.userInfo.id,
              filePath: tempFilePaths[0],
              name: 'file',
              header: {
                'content-type': 'application/json', // 默认值
                 'headerUserId': user.id,
                'headerUserId':1002,
                'headerUserToken': user.userToken
              },
      
              success: function (res) {
                //接受过来的数据为String类型
                console.log(res.data);
              //接受过来的数据为String类型,将String类型转化为JSON对象 
                var data = JSON.parse(res.data);
                wx.hideLoading();
                if (data.status == 200) {
                  wx.showToast({
                    title: '上传成功!~~',
                    icon: "success"
                  });
                  //获取相对路径
                  var imageUrl = data.data;
                  me.setData({
                    faceUrl: serverUrl + imageUrl
                  });
    
                } else if (data.status == 500) {
                  wx.showToast({
                    title: data.msg
                  });
                } else if (res.data.status == 502) {
                  wx.showToast({
                    title: res.data.msg,
                    duration: 2000,
                    icon: "none",
                    success: function () {
                      wx.redirectTo({
                        url: '../userLogin/login',
                      })
                    }
                  });
                }
              }
            })
          }
        })
      },
    
    
    展开全文
  • 微信小程序 上传头像截图功能

    千次阅读 2018-06-12 11:25:54
    越来越多的微信小程序 拥有了自己的个人中心,既然有了个人中心 那就要有 头像了, 有些人不想用微信的头像来当做小程序的头像,于是有了下面的问题 头像上传, 以及截取头像.这种方法 是比较简单的一种 下面是主要的JS ...
  • 主要为大家详细介绍了微信小程序实现上传图片功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序头像上传

    千次阅读 2018-12-26 14:05:16
    &lt;view class='head_img'...头像&lt;/text&gt; &lt;view class='img'&gt;&lt;image src='{{userimg}}'&gt;&lt;/image&gt;&lt;/view&gt; &lt;/view&gt; 二、
  • 微信小程序 上传头像

    2020-11-02 17:03:07
    that.setData({ userimg: that.data.userimg }) } }) }, // 上传至服务器 upload_file: function (url, filePath) { var that = this; // var token = JSON.stringify(wx.getStorageSync('token')) wx.uploadFile({...
  • 主要介绍了微信小程序实现获取用户信息并存入数据库操作,涉及微信小程序wx.request后台数据交互及php数据存储相关操作技巧,需要的朋友可以参考下
  • }, methods: { /** * 上传图片 */ upload() { let that = this; wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success(res) { const tempFilePaths = res....
  • 微信小程序生成头像

    千次阅读 2020-11-27 11:24:41
    校庆头像生成,圣诞头像生成,国庆头像生成。 实现自己选择图片,根据用户微信头像生成图片。 能通过微信代码审查,调用微信小程序珊瑚安全API。
  • //点击上传头像方法 showAction() { let that = this wx.showActionSheet({ itemList: ['从相册中选择', '拍照'], success: function(res) { if (!res.cancel) { console.log(res.tapIndex) if (res....
  • Uni-app 微信小程序头像上传

    千次阅读 2020-05-25 06:46:25
    需求是想将图片转为base64格式后上传服务器,经多方查找,找到了微信提供的Api方法 wx.getFileSystemManager()。 wx.getFileSystemManager wx.FileSystemManager.readFile() 方法可以提供的本地文件路径、读取本地...
  • 微信小程序头像

    千次阅读 2018-04-18 14:36:10
    效果图:   先上HTML: &lt;view class="list-menu"&gt; &lt;view class="navigator" bindtap='changeHead'&...头像&lt;/text&gt;&lt;/view&
  • 一款非常好用的 canvas 裁剪的头像上传 组价 不需要写很多代码 github 地址:https://github.com/we-plugin/we-cropper
  • 这次给大家带来的是微信小程序 上传头像的实例详解,最近在做微信小程序上传头像和上传照片功能就随手写一下代码,这篇文章就给大家好好分析一下。上传头像html:头像JS代码// 切换头像changeAvatar: function () {...
  • 2、根据userInfo.avatarUrl获取用户头像图片的 URL,这个url在小程序里展示可以,但是不能保存图片。 3、通过wx.getImageInfo()方法获取图片信息 4、通过wx.uploadFile()方法上传图片到服务器 //获取图片信息 ...
  • 主要为大家详细介绍了微信小程序实现点击图片旋转180度并且弹出下拉列表,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 大家好今天给大家带来一款头像框制作微信小程序源码 该源码免服务器和域名,操作简单 内包含了多种模板制作,风格多样 比如最近比较热门的姓氏头像,虽然该主题是以姓氏为主 但是姓氏主题也分很多种模板,并以复古,...
  • 微信小程序剪切头像

    2020-06-04 17:20:53
    使用开源插件:git地址 直接将上述项目中的example目录下 把we-cropper文件夹赋值到自己的项目中调用即可。 实现剪切的功能需用两个页面,一个用于展示,一个用于剪切 第一个页面userInfo: ...头像</view>
  • 在【海豚趣图】的交互设计中,用户有三种选择图片的方式:微信头像、本地相册和相机拍摄。获取用户头像的产品设计如下图所示:1、由于微信官方不再支持通过 wx.getUserInfo 接口来获取用户信息,我们必须通过使用but...
  • 本人资深口红爱好者,自己收藏了100多支口红了(捂脸)看... ps: weixin上有个叫口红试色的微信小程序,如果没时间去专柜试色,可以在上面查到几乎所有牌子的试色,强烈推荐~在搜索框里直接搜口红试色就有了。 祝变美!
  • 微信小程序用户头像编辑上传

    千次阅读 2019-03-28 09:01:51
    微信小程序用户头像编辑上传 近期接触了一个小程序项目
  • 在网上看了好多小程序上传图片,java后端接收的示例,但是不管在哪个网站看的,代码基本是一样的,都是代码特别多。 所以就自己写一个比较简单的。  一 小程序端 user.wxml ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,106
精华内容 1,642
关键字:

微信小程序上传头像

微信小程序 订阅