ajax 上传图片

最新推荐文章于 2024-04-20 03:39:57 发布

tang05709

最新推荐文章于 2024-04-20 03:39:57 发布

阅读量360

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/tang05709/article/details/79848737

版权

js 专栏收录该内容

109 篇文章 0 订阅

订阅专栏

$('#avatarForm #avatar').on('change', () => {
    const avatarUrl = '/api/update_avatar'
    const formData = new FormData()
    const avatarImg = $('#avatar')[0].files[0]
    formData.append('avatar', avatarImg)
    const ajaxOptions = {
      method: 'POST',
      cache: false,
      data: formData,
      processData: false,
      contentType: false,
      dataType: 'json',
    }
    ajaxOptions.headers = {
      Authorization: getToken(),
    }
    $.ajax(avatarUrl, ajaxOptions).done((data) => {
      $('#avatarForm #avatar_image').html(data.data)
    }).fail((error) => {
      // window.location.href = '/login'
      console.log(error)
    })
  })

js打印FormData数据需要使用formData.getAll('avatar'),只打印formData是没数据的

后端保存

def update_avatar
      # 上传到本地
      myfile = DetailUploader.new
      file_version = myfile.store!(params[:avatar])
      base_path = myfile.url()
      file_name = myfile.filename
      full_path = "http://" + ENV.fetch('DEFAULT_HOST') + base_path
      # 上传到oss
      avatar = Utils::Image.upload_by_url(full_path, 'avatar', file_name)
      # 保存数据库
      avatar_save = { key: avatar }
      current_user.update!(avatar: avatar_save)
      # 删除本地图片
      File.delete("#{Rails.root}/public#{base_path}")
      render json: {
        data: ApplicationController.helpers.show_image(avatar, w: 100, h: 100)
      }
    end